By 
Note and Alert box are the great parts of any article. Today I am telling about how to create note and alert box and add those in any article. When you tell any important part of your article you can use those boxes so that your readers may see those terms properly:
Create a note box:
Create a note box is very easy. You need to add a very easy css code at your custom.css file on thesis theme.
- First log in your account
- Go to custom/custom.css
- Add this code anywhere in custom.css file
/******************************************************************/
/* NOTE BOX BY AHMASUD.COM */
/******************************************************************/
.custom .format_text p.note {
background: #E3F0F2 url(images/note3.jpg) center no-repeat; border: 1px solid #66CCCC; background-position: 7px 50%; text-align: left; padding: 10px 10px 10px 50px;
-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;}
- Then download this picture.
- Upload it your custom/images folder via any FTP client
That’s it. Isn’t it easy? Now put this code where you want to see this box.
This is a live preview of note box
Create an alert box:
- First log in your account
- Go to custom/custom.css
- Add this code anywhere in custom.css file
/******************************************************************/
/* ALERT NOTE BOX BY AHMASUD.COM */
/******************************************************************/
.custom .format_text p.alert {
background: #EEEEEE url(images/alert3.jpg) center no-repeat; border: 1px solid #000000; background-position: 7px 50%; text-align: left; padding: 10px 10px 10px 50px;
-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;}
- Then download this picture.
- Upload it your custom/images folder via any FTP client
Now put this code where you want to see this box.
This is a live preview of alert box
Last Word:
This is very easy tutorial. If you have any problems don’t hesitate to comment it. I will try my best. You can also HIRE ME for THESIS customizing work. See my service page for more details.
{ 11 comments… read them below or add one }
Thanks for this. Do i create other boxes like that such as
/******************************************************************/
/* TEST BOX BY AHMASUD.COM */
/******************************************************************/
.custom .format_text p.test {
background: #EEEEEE url(images/test.jpg) center no-repeat; border: 1px solid #000000; background-position: 7px 50%; text-align: left; padding: 10px 10px 10px 50px;
-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;}
Yes you can create any box with change the color and image. Thanks for share
Hello, can you make this boxes for other themes?
.-= Robert´s last blog ..How to create a 2 column web page using Html =-.
Yes, that’s also very easy. First add those css code in your theme style.css and put
< p class= " alert ">This is a alert< / p>where you want to see your alert.**remove those space
That’s it. Thanks for your comment..
Sweet, really easy and not much code used. Bookmarked!
Hello,
I would like to put an alert in the feature box, right above my content area. Can I use exactly this code or do I need a further adaptation?
Thank you
Yes, you can use exactly same this code to get feature box, right above your content area. Don’t forget to give your result. Thanks
Thank you for your prompt response! As you can see, the result is a tiny strip, and the icon is not visualized…
Sorry, I’ve forgotten to link to my site…
Ok i will send you a mail. Hope it works Thanks.
Thanks, really appreciate it. Thanks for your comment.
{ 2 trackbacks }