1897 Subscribers and Counting!!!

Few days back, Atul from Ocean of Web left a comment at How to Block Visitors from specific IP using .htaccess hack.

This is what he asked :

Hi Nihar
Make sure you backup .htaccess file before you making any changes.

for this line in red color box with cross mark, are u using any plugin for this

You can check the comment here

In above post where he left the comment, I have put the following:

Make sure you backup .htaccess file before you making any changes.

Today, i am going to share the CSS and images and also tell you how you can add these Custom Paragraphs or Sentences to highlight them in your Blog post

How to add Custom Paragraphs or Sentences in your Blog post

1. First open your Theme’s style.css file and then copy the below CSS snippet at the end of the file. Note: all themes doesn’t have css filename as style. So, check accordingly.

   .info {font-size: 11px;color: #191919;background: #ebe9ce url(images/info.gif) no-repeat 5px center;font-family: Verdana, sans-serif, "Courier New";line-height: 125%;margin: 10px 0px 0px;padding: 12px 12px 12px 25px;display: block;font-weight: 400;width: 80%;border-top: 2px solid #DAD6A5;border-bottom: 2px solid #DAD6A5;}
   .warning {font-size: 11px;color: #191919;font-family: Verdana, sans-serif, "Courier New";line-height: 125%;background: #e3aeae url(images/warning.gif) no-repeat 5px center;display: block;margin: 10px 0px 0px;padding: 12px 12px 12px 25px;font-weight: 400;width: 80%;border-top: 2px solid #D68585;border-bottom: 2px solid #D68585;}
   .download {font-size: 11px;color: #191919;font-family: Verdana, sans-serif, "Courier New";line-height: 125%;background: #d5ecd5 url(images/download.gif) no-repeat 5px center;display: block;margin: 10px 0px 0px;padding: 12px 12px 12px 25px;font-weight: 400;width: 80%;border-top: 2px solid #A9D8A9;border-bottom: 2px solid #A9D8A9;}
   .alert {font-size: 11px;color: #191919;line-height: 125%;background: #FFE5BF url(images/alert.gif) no-repeat 5px center;font-family: Verdana, sans-serif, "Courier New";display: block;margin: 10px 0px 0px;padding: 12px 12px 12px 25px;font-weight: 400;width: 80%;border-top: 2px solid #FFC46A;border-bottom: 2px solid #FFC46A;}
   .note {font-size: 11px;color: #191919;font-family: Verdana, "Times New Roman", Times, Georgia, serif;line-height: 125%;background: #eaf2f5 url(images/note.gif) no-repeat 5px center;display: block;margin: 10px 0px 0px;padding: 12px 12px 12px 25px;font-weight: 400;width: 80%;border-top: 2px solid #B7D2DD;border-bottom: 2px solid #B7D2DD;}
   .click {font-size: 11px;color: #191919;font-family: Verdana, "Times New Roman", Times, Georgia, serif;line-height: 125%;background: #fcfbed url(images/click.gif) no-repeat 5px center;display: block;margin: 10px 0px 0px;padding: 12px 12px 12px 25px;font-weight: 400;width: 80%;border-top: 2px solid #F2EDB0;border-bottom: 2px solid #F2EDB0;}

2. Now, if you check the above css code. It is using some images. Below, i am providing the images.zip file. Please download it and upload it in your THEME DIR/images/ directory. If you don’t see images directory under your THEME directory, then create one and extract the images from the images.zip file.

   Download Images for above CSS code

Its done. Now you can start using these in your post. I will give you the code for each also real-time implementation below.

Info message

If you want to give some information then use info class. Here is how you can do it.

Code

<span class="info">This example is to show message using Info</span>

Code’s output

This example is to show message using Info Class

Warning message

If you want to give some information then use info class. Here is how you can do it.

Code

<span class="warning">This example is to show message using warning</span>

Code’s output

This example is to show message using Warning class

Download message

If you want to give some information then use info class. Here is how you can do it.

Code

<span class="download">This example is to show message using download</span>

Code’s output

This example is to show message using Download class

Alert message

If you want to give some information then use info class. Here is how you can do it.

Code

<span class="alert">This example is to show message using alert</span>

Code’s output

This example is to show message using Alert class

Note message

If you want to give some information then use info class. Here is how you can do it.

Code

<span class="note">This example is to show message using note</span>

Code’s output

This example is to show message using Note class

Click message

If you want to give some information then use info class. Here is how you can do it.

Code

<span class="click">This example is to show message using click</span>

Code’s output

This example is to show message using Click class

I hope you liked this post and is useful for you. I also hope that you implement it and use it in your future posts in your Blog!

In this post i have also used Syntax Highlighting, this is achieved using Beautify code using Syntax Highlighter Pluging

If you are new to CSS and want to learn about, then Do check this Learn CSS by reading this Book. Download It Free!

Do check it out!

If you have any questions or suggestions, Please do share via comments.

1897 readers are already subscribed to this blog! Why don't you be one of them? Subscribe to this blog via your favorite RSS feed reader or by entering your email address on the form below:

You Should Also Check Out These Posts:

• How to Find and Remove Duplicate Images or Pictures from your PC
• How to Block Visitors / Traffic from a Specific Country
• How to avoid Hotlinking of file and images using .htaccess hack
• How to Block Visitors from specific IP using .htaccess hack
• How to implement Threaded Comments in Wordpress Themes

This entry was posted on Thursday, June 4th, 2009 at 10:05 pm and is filed under Blog Related, How-To, Webmasters. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.