WordPress info/warning/error boxes

In a number of posts I use some custom CSS styles to highlight sections of the text containing information, warnings, etc.  These are easy to achieve within WordPress by uploading a few images and adding a section of CSS code to your template’sstyle.css file as described below.

Here's an example of how the "info" style looks once you have completed the simple steps in this post:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.


Uploading the images

The first step is to upload the following four images to your WordPress site. Start by downloading each of them to your hard drive (right click on each and select "save image as").

   
Now select "Media > Add" from the WordPress menu and upload the saved images to your site. Once they have been uploaded, click on the "show" link next to each of the images and make a note of the File URL shown for each one:


Add the CSS to your site

Select  "Appearance > Editor" from the WordPress menu. By default the file loaded into the editor should be style.css (the filename being edited is shown under the title). If this is not the case then select style.css from the list of files on the right hand side of the page (near the bottom).

Add the following CSS to the bottom of the file, changing the URLs to the correct ones for your site, and then click "Update File".

.info, .success, .warning, .error, .console {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px 10px;
}
.info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('/wp-content/uploads/2012/07/info.png');
}
.success {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image:url('/wp-content/uploads/2012/07/success.png');
}
.warning {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('/wp-content/uploads/2012/07/warning.png');
}
.error {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('/wp-content/uploads/2012/07/error.png');
}

For those using LESS CSS you can use the following, more compact version instead:

.hl_img_box(@fg_col, @bg_col, @img) {
    color:               @fg_col;
    background-color:    @bg_col;
    border:              1px solid;
    background-image:    url(@img);
    margin:              10px 0px;
    padding:             15px 10px 15px 50px;
    background-repeat:   no-repeat;
    background-position: 10px 10px;
}

.info   {.hl_img_box(#00529B,#BDE5F8,'/wp-content/uploads/2012/07/info.png');}
.success{.hl_img_box(#4F8A10,#DFF2BF,'/wp-content/uploads/2012/07/success.png');}
.warning{.hl_img_box(#9F6000,#FEEFB3,'/wp-content/uploads/2012/07/warning.png');}
.error  {.hl_img_box(#D8000C,#FFBABA,'/wp-content/uploads/2012/07/error.png');}

Unfortunately, if your theme is updated or you change your site to use a different theme then these changes will be lost and you will have to re-add the CSS to style.css again. Note that some themes do provide an option for you to enter your own custom CSS entries so that they do not get lost when the theme is updated. If your theme allows it, then this is preferable to updating style.css file.

Using the styles

Now everything is in place you can use these styles throughout your site. Whenever you want to include some content within one of the box styles, switch to the HTML view in the post editor and wrap your content with a DIV of the type you want ("info", "success", "warning" or "error") like so:

<div class="warning">
Objects in the rear view mirror may appear closer than they are.
</div>
Objects in the rear view mirror may appear closer than they are.