Highlighting important information in an article helps to convey the message successfully to the users. Generally, you can use message boxes to showcase tips, help, warning, alert and many other type of information. Frameworks like Bootstrap offer predefined alert component for adding these info message boxes. Similarly, you can use plugins on content management systems like WordPress. On Weebly, you can create info message boxes using simple CSS. In this article we will explain adding info message box in Weebly site based on the Bootstrap alert component.
Info Message Boxes
We will create message boxes with two different styles.
- Using font icons
- Using small icon images
Font icons are good option if you are using Font Awesome on your site. Otherwise, you can choose the image option instead of font icons.
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.
1. Info Message Box With Font Icons
Below is how the boxes will look like containing CSS color box and a font icons before the text.
The first step to create these info boxes 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://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
The second step is to add the CSS below code under “main.less” 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 you have added the CSS code, go to the page you want to add info message box. Copy and paste the below HTML code by dragging an “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 a 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>
We have used font awesome 4.7 on this example. You can use version 5 or 6 by replacing the CSS and corresponding classes in the HTML.
2. 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 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 “https://your-site-name.com/files/theme/info.png”. Alternatively, you can right click on the uploaded file and get the correct file path of that image.
Once you have the correct file path of the uploaded images, add the below CSS code in your “main.less” 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.
Note: You have two other options, instead of adding CSS code under header section of the site’s “Settings”. One is to insert the code under “main.less” file and other is adding 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.