• Blogging
  • Freebies
  • Freeware
  • How-To
  • Make Money Online
  • Mobile
  • Home >> Blogging >> Blog Related >> How to Highlight Special Paragraphs or Sentences in the post or article

    How to Highlight Special Paragraphs or Sentences in the post or article


    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.

    IMPORTANT: This blog welcomes Guest Bloggers, Writers to also contribute by writing Guest Posts and also Make Money!. Check out our Revenue Sharing Program
    1924 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:





    22 Comments

    1. TechZoomIn says:

      Great Great post Nihar,

      Was wondering how to get that effect. Thanks for sharing it with us!

    2. Hi,

      some nice little hacks if I say so myself. Thesis has a note and alert which looks cool. I will try and see if I can adapt these for Thesis. I like the small icons/images on the left hand side, makes it look a lot better.

      Thanks for sharing them 🙂

    3. Donace says:

      That is a neat trick…will have to go and add that to all my coding posts now :p

    4. Kikolani says:

      Those are great tips indeed! I’d like to add that warning block to a comment I made recently on another blog about a plugin I downloaded that they referenced in their article. Messed up one of my categories comments!

      ~ Kristi

    5. Ricky says:

      @Nihar
      can you tell me the code for ‘1193 subscriber already subscribed to……’?

    6. Ricky says:

      Check your download file.It is showing 404 error.

    7. Ricky says:

      oh the link is broken.Extra is there

    8. Thanks for the useful tutorial! I’ve been wondering how to do the effect

    9. Lyndi says:

      This is now what I call handy. This is a great idea and I can already think of quite a few places where I could use something like this. Thanks.

    10. Gagan says:

      Yea, I am using the emphasis tag on my blog for highlighting lines. 🙂

    11. Atul says:

      Thanks a lot Nihar for this wonderful info and mentioning my name. Sorry for late commenting but actually little busy with my work

    12. Atul says:

      And of course great great useful info Me soon implementing it in my blog. One query regarding Spam protection: Don’t you think that some users feel it a tedious task while commenting

    Leave a Reply

    page counter
    NiharsWorld on Twitter NiharsWorld on Facebook NiharsWorld RSS Feed