Thesis Tutorial – Styling of Note, Alert and other boxes in posts

I have seen many sites use this method and I am one of them too. You can style your alert and note boxes that display in your posts.

The boxes don’t normally have images in and this post will show you how to add an image on the left and have the wording displayed on the right hand side. The two examples below are for the note and alert boxes, but you could create boxes for any other reason. The same would apply.

Note Box

This is an example of the note box that will appear in my posts.

This is the code you would enter in your posts (html code).

This is an example of the alert box that will appear in my posts.

This is the css code you would put in your custom.css file.

.custom .format_text p.note {background: #E3F0F2 url(images/note.png) center no-repeat; border: 1px solid #66CCCC; background-position: 7px 50%; text-align: left; padding: 10px 10px 10px 45px; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px;}

This shows a note image on the left and then what ever wording I have on the right.

Alert Box

This is an example of the alert box that will appear in my posts.

This is the code you would enter in your posts (html code).

This is an example of the alert box that will appear in my posts.

This is the css code you would put in your custom.css file.

.custom .format_text p.alert {background: #ffffa0 url(images/alert.png) center no-repeat; border: 1px solid #E6DB55; background-position: 7px 50%; text-align: left; padding: 10px 10px 10px 45px; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px;}

This shows an alert image on the left and then what ever wording I have on the right.

Creating other boxes:

All you have to do is copy the css styling of the alert box and change the p.alert to p.new_name. Upload another image for that box and change the image name in the css styling.

Final Thought

You could create other boxes that you require just by copying the css styling and giving it another naming convention. I hope this helped a bit and that you have updated your boxes or created new ones.

Tagged as: styling thesis alert box, styling thesis boxes, styling thesis note box, Thesis, thesis tutorial

From the desk of George Serradinho

I am the proud owner of Serradinho Blog and have made this my second home. I'm into blogging, downloads, WordPress, meeting and helping others, etc. Basically the internet in general :) Serradinho Web Services is my own company whereby I offer my services to clients. This ranges from web design, website upgrades, theme customizations, support, premium WordPress plugins and many more .....

View all posts by George Serradinho, there might be other posts that interest you.