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

        

Guest Posts

If you want to guest post on Serradinho, please visit our Guest Posting Guidelines

Bookmark/Share

Other Interesting Posts:

• CommentLuv CSS Styling of last blog post
• Thesis Tutorial – Displaying Users Twitter link in the Comments Section
• Thesis Tutorial – Display Scheduled Posts
• Thesis Tutorial – Add Extra Menu Links under Teaser Posts
• Thesis Tutorial – Full Width Header and Menu
• Thesis Tutorial – 3 Basic Thesis Customizations
• Cool CSS trick for Thesis

Author Information

Article by George Serradinho

I am the proud owner of Serradinho and have made this my second home. I'm into blogging, downloads, WordPress and the internet in general. I also love meeting and helping others and learning new techniques.