HOW TO: Elegant CSS Message Boxes for Blogs

Editorial Staff · blogger, blogger hacks, blogger templates, blogger widgets · 25 Comments

CSS Message Boxes for Premium Style Blogger Templates

Wait are you and WordPress user? Dont think this can be used only on Blogger. Css is common to all so read on. Want to display an error message, or an alert, or simply a notification in your blogger template? No you dont have to create a photoshopped image and add the image in your posts all the time. Let me tell you how some simple CSS can be used to do that trick.

Css+meaage+box+for+wordpress+blogger+blogs HOW TO: Elegant CSS Message Boxes for Blogs

CSS+Message+Boxes+Blogger+template HOW TO: Elegant CSS Message Boxes for Blogs

/*message box chethstudios */
.fave_css, .home_css, .idea_css, .author_css, .rss_css, .pen_css, .tooledit_css, .alert_css, .comment_css, .lock_css, .book_css {
border: 1px solid
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.fave_css {
color: #00529B;
background-color: #BDE5F8; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url('http://4.bp.blogspot.com/_5rlxf3T9Z9U/SsIXnWAiPmI/AAAAAAAADbw/PNPR20ioK_g/heart_32.png');

}
.home_css {
color: #4F8A10;
background-color: #DFF2BF; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image:url('http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIXp7bJEAI/AAAAAAAADb4/c0XYyhY-DXg/home_32.png');
}
.idea_css {
color: #9F6000;
background-color: #FEEFB3; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url('http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIXsMD87MI/AAAAAAAADcA/hx_l4F3pcLQ/lightbulb_32.png');
}
.author_css {
color: #2E2D2D;
background-color: #A1C2C7; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url('http://4.bp.blogspot.com/_5rlxf3T9Z9U/SsIeeYeesFI/AAAAAAAADcw/yVE6xvr9S_U/user_32.png');
}
.rss_css {
color: #4F8A10;
background-color: #DFF2BF; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image:url('http://3.bp.blogspot.com/_5rlxf3T9Z9U/SsIX0rlYZ9I/AAAAAAAADcY/YE6Y2Nev0to/rss_32.png');
}
.pen_css {
color: #2E2D2D;
background-color: #C8E0C8; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url('http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIXyk9CJRI/AAAAAAAADcQ/BJZBSRCq7tQ/pencil_32.png');
}
.tooledit_css {
color: #554529;
background-color: #F1C983; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url('http://3.bp.blogspot.com/_5rlxf3T9Z9U/SsIX4ODWwwI/AAAAAAAADcg/p8D5a_X72Qo/tools_32.png');
}
.alert_css {
color: #2E2D2D;
background-color: #D25F66; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url('http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIX7-C1GYI/AAAAAAAADco/5XubUJ34o2c/warning_32.png');
}
.comment_css {
color: #2E2D2D;
background-color: #A6C8D2; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url('http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIXkQfrW9I/AAAAAAAADbo/EsSD0I42srs/comment_user_32.png');
}
.lock_css {
color: #2E2D2D;
background-color: #FFBABA; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url('http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIXuytpYfI/AAAAAAAADcI/I4Tm0W5gDQk/lock_32.png');
}
.book_css {
color: #4F8A10;
background-color: #DFF2BF; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image:url('http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIXiIlQU2I/AAAAAAAADbg/b3ERrIS-idI/address_book_32.png');
}
/*message box end*/

And Whenever You make use of this message box. type your message within the div code. And you will have a beautiful message box customised with your own icon.

<div class=”fave_css “>
This is a neat box to show some text with a heart message icon.
</div>

<div class=”home_css “>
This is a neat box to show some text with a home message icon.
</div>

<div class=”idea_css “>
This is a neat box to show some text with a idea message icon.
</div>

<div class=”author_css “>
This is a neat box to show some text with a author message icon.
</div>

<div class=”rss_css “>
This is a neat box to show some text with a rss message icon.
</div>

<div class=”pen_css “>
This is a neat box to show some text with a pen/pencil message icon.
</div>

<div class=”tooledit_css “>
This is a neat box to show some text with a edit message icon.
</div>

<div class=”alert_css “>
This is a neat box to show some text with a alert/caution message icon.
</div>

<div class=”comment_css “>
This is a neat box to show some text with a comment message icon.
</div>

<div class=”lock_css “>
This is a neat box to show some text with a lock message icon.
</div>

<div class=”book_css “>
This is a neat box to show some text with a book message icon.
</div>

You can also get a free subscription to Chethstudios updates. We will be back with more useful content. Get latest hacks and updates on your email
Download the testking 642-515 tutorials and testking 650-393 demos to learn about CSS and wordpress. Join testking RH202 online course to learn about more useful contents.

PinExt HOW TO: Elegant CSS Message Boxes for Blogs

About the author

Editorial Staff

Editorial Staff, and we have a sense of humor too! :P

Comments
Trackbacks

25 Comments

sudha

10.03.2009

Reply

A nice tutorial Cheth!! I love those icons.. they look very cute!!!
Shivangi

10.03.2009

Reply

This is very cool
TeknoMobi

10.04.2009

Reply

Thanks Cheth. Very good tutorial
Joshua Childs

10.05.2009

Reply

There is an error in your css, a semicolon was missing after the border style in your first rule.

I have it in my head that being less explicit about generic message box declaration would make life easier in the future should you want to add new types of message boxes.

For example this:
.fave_css, .home_css, .idea_css, .author_css, .rss_css, .pen_css, .tooledit_css, .alert_css, .comment_css, .lock_css, .book_css {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}

would turn into:
.message_box {
background-position: 10px center;
background-repeat: no-repeat;
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
}

and in the html, this:
<div class="fave_css ">
This is a neat box to show some text with a heart message icon.
</div>

would turn into:
<div class="fave_css message_box">
This is a neat box to show some text with a heart message icon.
</div>
Cosmin

10.06.2009

Reply

Lovely boxes, bookmarked!

Thanks for your efforts
Dan

10.10.2009

Reply

unless im missing something, they can all be -moz-border-radius: 18px
and by that point you might as well add -webkit-border-radius: 18px
Outdoor Lighting

10.12.2009

Reply

A very nice tutorial. Thanks for your efforts.
tommy

10.12.2009

Reply

Interesting idea. I'd recommend consolidating and cross-browsering the rounded corner CSS. Maybe make a default class for all of them.

Good work!
Artems

10.15.2009

Reply

Ou its beautifull blog! Really. Plz http://freemusicvk.blogspot.com/ .. its my first blog please look at it.
Sasa

10.21.2009

Reply

Yes, you should really change all those 4 styles with just "-moz-border-radius: 18px" and also, if you want to enable this in google chrome and safari, add "-webkit-border-radius: 18px" too.
clippingimages

10.25.2009

Reply

WoW Awesome tutorial post. Nice css explanation for message boxes. Thanks for sharing this nice post.
pnr-status

12.14.2009

Reply

yes bro! thats beautiful tutorial
pnr-status

12.14.2009

Reply

css message box is useful to my friend website.
http://www.areapal.com/rapo
Long Island Web Design

01.21.2010

Reply

Great post….
this tutorial will be beneficial to everyone…keep posting
Anonymous

05.01.2010

Reply

Why are they not rounded ! WTF ?
takycardia

05.12.2010

Reply

I don't know if they aren't rounded but there is a little error in css (example: background-image:url('http://3.bp.blogspot.com/_5rlxf3T9Z9U/SsIX0rlYZ9I/AAAAAAAADcY/YE6Y2Nev0to/rss_32.png&#39 ; ) Instead of ' and ' you have tu place this: '
and after the image line you have to place:
background-repeat:no-repeat;
if you don't want the image to be repeated in each line.

If someone knows of to make them rounded I'm here ready to listen
takycardia

05.12.2010

Reply

Found the way to have them rounded…instead of every:
-moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;

place:

-webkit-border-radius: 18px

It will be enough and it works in Blogger XD
E-profitbooster

07.07.2010

Reply

Hi,

Presentation of CSS Message Boxes for Premium Style Blogger Templates is good.

Dayanand from Website Developmen Co.
Ventsislav's blog

09.05.2010

Reply

Super post ! 10x
Anonymous

09.21.2010

Reply

For all that ask where's the round box, well first of all round corners don't work with IE, only Chrome, Firefox, Safari and Opera. New IE9 Beta does have border radius.

To include all* browsers and IE9 you should use:

-moz-border-radius: 18px;
-khtml-border-radius: 18px;
-webkit-border-radius: 18px;
border-radius: 18px;

Once again pre IE9 doesn't have border radius support.

Good Job mate
mortgage calculator with taxes

10.25.2010

Reply

Let me know some simple CSS can be used to create some images in blog?
Marketing Agency

11.07.2010

Reply

great link… i found some perfect results for me here… thanks a lot to share!
Madhu

01.12.2011

Reply

Wonderful article, Thanks
Al Aidarous

06.25.2011

Reply

I did follow the rest of the comments, thanks guys you helped me a lot. I appreciate it.
Andy Online

10.23.2011

Reply

good job, i use this MBox to my blog thanks..

There are no trackbacks to display at this time.