HOW TO: Elegant CSS Message Boxes for Blogs

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.

/*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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifOFTAfRfyb8Xyxhw7fv6C89B4hzv4HvnaoIrEA4LfCDnTTjq7JqX_D1Vo_Ebfadf0fH40aF7gFZLXPJFFA-QiW66XnkPKMHW-oVF31BeID0Nq5PQjiMWZV-h_JJmMy7BS2F6ZzfsUhqQ/');

}
.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwTH5ZroYA36VTfj-_YcVkhdLr1UQirfYCwNyP61zJyQx-Oh7B8amS165o_o4-cHGcSk7tuAkYJiPqYFwI5prGWDCh5SnOs9D64FWnudhZnV8nTWQI_Fg3kbTIYw6bT8m_5CQMmXuh9w0/');
}
.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX_uM8Q7mvzURqnPenaKO9bDnYLJd9AZ1XNLzj_JDphklIax1uhulcwfmWsi4NH2BWECdyEiQVLq80D4f_vPsWfp9dD5cSYx65zPZpNb7mKpEHxgkO0XYn-k2jr2PKviurypAPXWLUAuI/');
}
.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUO0GjEoCqbUzS4AnuwS18JtclwHEwdDkr8Menre9NZxEhdj2yKnMYb84kO-E6eF3_jm2yVYuf1JmyarbynJ2xnKfkX_RDNZ5oETXqerKSlKKG2x9NlA0RDQwfXqnG7ly-3Ba2bt9kgzc/');
}
.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGULDMQkNion_NjtsPRfZU0v9INEBW4lZ_cVqxkP3OKW4qFfz1GOW9K_D-fpZxn3DDrDWvGgECLe-wEnsvrqj2jDju2SJqg9day1-zdSSH6Ifs6hBr2ZFshmmXOYruSzX6zA3ahe_YHmk/');
}
.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQdClNdx72JAbP_MOQh8VCq7GP36G_lBfbkbVMqcbzjeKXoZ5bUbzO93KBO5ANZhC0f5gLMg786Ad3iQZWbtjL33lvWLJesFuXDu6X2BCdYTzu0FIUCFwAuEvjDhVbojaeKJRET1430AU/');
}
.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf8PTpwYH_BwrAc1ibkoJ0AWVTe5yWyZI4LrUZnN7Gd0LILM57_kw0PxqTAjWdLT9pZeZnxS2TYO-05ATKB-5UEmMzAwOOga4rRsVJABQGVqm6E2zEgjHl90eqPMbUiAnYwcd_89gxCCE/');
}
.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFLZRyiB5yhyeOICW8le9tbE9z5cm4xIYtdJgXtvCJaZ9mkYh1l9QS4KVH470DirSu2SK-p1KeZbB7X2iB6vQC1tset0jeiH2Hkq5dODCHmzoan2wdvW8UejKgIgSE7oNmH3rKG7XYk98/');
}
.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwwpLafoP19RvgJ-Y8obmSVDV6cFyiWAJV7VYlk32K8CMhmd0vCdvQQ7NBO8xkL7fSaXEgID-tPAaP8YFfK2U7V8C99lu2ZSLpSfO5IJ-SwzfKWML6ahpyoslxUpuQHOs7LlrWHD68kKE/');
}
.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzEZu1mMCWh-r00Dh1Os7B765oYdINZ5-KUFkQoT8FfXRolrLmzwBnvT6fkCMH_GMToG0eGuN3ypXne2WtT7EIuKTYyNfzeadGLPHApNLrI8xoAsldkzp7nev3XKVM-qr1g2Z_9ksKVHU/');
}
.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtimvguCaXwwpznbfJGb_I9ze_G0FG0Trc9VVswadjU8ogfOwdY9-iNHXVgId4tq2XD_jK4n8py7c0fXnpXWDI6zgFoIsZgYBcAYCWLyQmWc3YssZ1zrek6TkMSWBjpQy7nT8lS4s2iEE/');
}
/*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.