We have four types of commonly used message boxes in a software/web application, I call them Info, Success, Warning and Error boxes.
Displaying message boxes in your site or application helps users a lot in identifying what they are doing or what is the result of their action, clicks or operations.
It would be great if your message boxes are clearly designed, with proper colors, message icons and is placed on the right part of your application.
Usually, it can be seen on the top/upper part of your application just like what we have on YouTube when you try to subscribe to a channel.
At the end of this tutorial, we will have the following output: (Please Click To Enlarge)
 |
| Four Commonly Used Message Boxes |
So, let's go! (Please read the comments on the codes):)
Step 1: We will organize our files in this way. (but you can still do it in your own way if you want)
 |
| Organization of files |
Step 2: Create your index.html file. You should have this code in it.
<html>
<head>
<title>Four Message Boxes</title>
<link href='styles/style.css' type='text/css' rel='stylesheet' />
</head>
<body>
<div class='info'>
This is an info box. Many people tell me I'm handsome.
</div>
<div class='success'>
This is a success box. Thank you for telling me I'm handsome.
</div>
<div class='warning'>
This is a warning box. You must tell me I'm handsome.
</div>
<div class='error'>
This is an error box. You didn't tell me I'm handsome.
</div>
</body>
</html>
<head>
<title>Four Message Boxes</title>
<link href='styles/style.css' type='text/css' rel='stylesheet' />
</head>
<body>
<div class='info'>
This is an info box. Many people tell me I'm handsome.
</div>
<div class='success'>
This is a success box. Thank you for telling me I'm handsome.
</div>
<div class='warning'>
This is a warning box. You must tell me I'm handsome.
</div>
<div class='error'>
This is an error box. You didn't tell me I'm handsome.
</div>
</body>
</html>
Step 3: Create your style.css file and the code would be:
/* this part will create the the message box*/
.info, .success, .warning, .error, .validation {
/* setting the box model */
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
/* setting fonts */
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight: bold;
}
/* this part will load the info box icon and make our box color blue */
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('../images/info.png');
}
/* this part will load the success box icon and make our box color green */
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('../images/success.png');
}
/* this part will load the warning box icon and make our box something like color yellow */
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('../images/warning.png');
background-position: 10px 7px;
}
/* this part will load the error box icon and make our box color red */
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('../images/error.png');
}
.info, .success, .warning, .error, .validation {
/* setting the box model */
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
/* setting fonts */
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight: bold;
}
/* this part will load the info box icon and make our box color blue */
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('../images/info.png');
}
/* this part will load the success box icon and make our box color green */
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('../images/success.png');
}
/* this part will load the warning box icon and make our box something like color yellow */
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('../images/warning.png');
background-position: 10px 7px;
}
/* this part will load the error box icon and make our box color red */
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('../images/error.png');
}
Step 4: If you are having problems blending the background color of your icon to the background color of your box, pipette will help you a lot. :)
*Note: You can just download or make your own icon for your message boxes :)
Thank you for reading! :)
For FREE programming tutorials, click the red button below and subscribe! :)
website