How to Add Notification Message Boxes in Weebly Site?
Highlighting important information in an article helps to convey the message successfully to the users. Generally the message boxes are used to showcase tips, help, warning, alert and many other types of information. In this article we will explain adding info message box in Weebly site with two different styles. One style is using font icons and other style is using small icon images.
General Feature of Info Message Boxes
The info message boxes will have the following features:
- Made with CSS and fully responsive auto aligning on mobile devices.
- Styles includes the message box for info, success, warning, danger, tips, help and announcement messages. You can also define your own custom message box based on the code.
- Add individual messages boxes based on your need. For example, when you want to display a tip use “tip message box” and for a warning use “warning message box”. This can be controlled within HTML pasted inside “Embed Code” element.
- Colors and fonts can be customized as you need.
- Width of the notification box can be extended to full width of the screen or shorten to fit the content length.
Info Message Box With Font Icons
Below is how the boxes will look like containing a CSS box and a font icon before the text.
The first step is to link the font awesome icons CSS into the header section of your site. In order to do so, add the below code under “Settings > SEO > Header Code” section in your Weebly site editor.
<link rel="stylesheet" href="https://www.webnots.com/resources/font-awesome/css/font-awesome.min.css">
The second step is to add the CSS below code under “main_style.css” file.
.webnots-notification-box {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #ffffff;
font-family: verdana, 'open sans', sans-serif;
margin-bottom: 25px;
padding: 10px 14px 10px 44px;
position: relative;
box-shadow: 0px 1px 5px #999;
/* width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content; */
}
.webnots-notification-box:before {
font-family: FontAwesome;
font-size: 21px;
left: 14px;
position: absolute;
}
.webnots-success {
background-color: #2ecc71;
}
.webnots-success:before {
content: "\f00c";
margin-left: -2px;
}
.webnots-failure {
background-color: #e74c3c;
}
.webnots-failure:before {
content: "\f00d";
}
.webnots-warning {
background-color: #e67e22;
}
.webnots-warning:before {
content: "\f12a";
margin-left: 5px;
}
.webnots-information {
background-color: #3498db;
}
.webnots-information:before {
content: "\f129";
margin-left: 4px;
}
.webnots-question {
background-color: #f1c40f;
}
.webnots-question:before {
content: "\f128";
margin-left: 2px;
}
.webnots-tip {
background-color: #16a085;
}
.webnots-tip:before {
content: "\f0eb";
margin-left: 2px;
}
.webnots-notice {
background-color: #bea474;
}
.webnots-notice:before {
content: "\f0a1";
margin-left: -1px;
}Once the CSS code is added centrally, go to the page you want to add the info message box and the below HTML code by dragging and “Embed Code” element:
<div class="webnots-information webnots-notification-box">This is the info box - You can input as much or as little information!</div> <div class="webnots-question webnots-notification-box">This is the help box - You can input as much or as little information!</div> <div class="webnots-tip webnots-notification-box">This is the tip box - You can input as much or as little information!</div> <div class="webnots-notice webnots-notification-box">This is the notice box - You can input as much or as little information!</div> <div class="webnots-success webnots-notification-box">This is the success box - You can input as much or as little information!</div> <div class="webnots-failure webnots-notification-box">This is the danger box - You can input as much or as little information!</div> <div class="webnots-warning webnots-notification-box">This is the warning box - You can input as much or as little information!</div>
Each < div >… </ div > tags cover different types of messages. For example, to add success box just add the below HTML code:
<div class="webnots-success webnots-notification-box">This is the success box - You can input as much or as little information!</div>
Info Message Box with Icon Images
The second style of message boxes use small images instead of font icons and will look like below:
This is an information alert - You can input as much or as little information!
This is an warning alert - You can input as much or as little information!
This is an rejection alert - You can input as much or as little information!
This is an acceptance alert - You can input as much or as little information!
This widget needs the following four icon images, right click and download the images to your local PC.
Upload the images under “Theme > Edit HTML / CSS > Assets > Upload File(s)…” of your Weebly site. The file path of an uploaded Weebly image will be like “http://your-site-name.com/files/theme/info.png”.
Once the images are uploaded, add the below CSS code in your “main_style.css” file. Don’t forget to update the image URLs with your Weebly site image URLs.
.info_alert {
background-image: url(https://img.webnots.com/2015/10/info.png);
border: 1px solid #CCCCCC;
background-color: #E0E0E0;
padding: 15px 15px 15px 45px;
background-repeat: no-repeat;
background-position: 10px 10px;
border-radius: 3px;
box-shadow: 0px 1px 5px #999;
margin: 10px 0px;
}
.warning_alert {
background-image: url(https://img.webnots.com/2015/10/warning.png);
border: 1px solid #FE7736;
background-color: #FFBD59;
padding: 15px 15px 15px 45px;
background-repeat: no-repeat;
background-position: 10px 10px;
border-radius: 3px;
box-shadow: 0px 1px 5px #999;
margin: 10px 0px;
color: white;
}
.danger_alert {
background-image: url(https://img.webnots.com/2015/10/danger.png);
border: 1px solid #FF0F0F;
background-color: #FF8080;
padding: 15px 15px 15px 45px;
background-repeat: no-repeat;
background-position: 10px 12px;
border-radius: 3px;
box-shadow: 0px 1px 5px #999;
margin: 10px 0px;
color: white;
}
.success_alert {
background-image: url(https://img.webnots.com/2015/10/success.png);
border: 1px solid #83CD52;
background-color: #8DE182;
padding: 15px 15px 15px 45px;
background-repeat: no-repeat;
background-position: 10px 12px;
border-radius: 3px;
box-shadow: 0px 1px 5px #999;
margin: 10px 0px;
color: #060;
}Go to the page you want to add the message box, and insert the below HTML code inside an “Embed Code” element.
<p class="info_alert">This is an information alert - You can input as much or as little information as you like within this section!</p> <p class="warning_alert">This is an warning alert - You can input as much or as little information as you like within this section!</p> <p class="danger_alert">This is an rejection alert - You can input as much or as little information as you like within this section!</p> <p class="success_alert">This is an acceptance alert - You can input as much or as little information as you like within this section!</p>
If you want to use only one box, then use the corresponding code within < p >…</ p > tags.
You can also add the CSS codes under header section of the site’s “Settings” instead of “main.less” or add the code under the header section of the particular page to be effective only on that page. In both the scenarios ensure to add the code within <style>…</style> tag.
3 Comments
Leave your reply.