How to Change Html Tags Style in Blog Post or Page of Thesis Theme?

In previous tutorial I explained about how to use the HTML tag for your blog. Now, in this tutorial I explain about how to style your HTML tag inside the post in thesis theme. As we know, thesis  theme customization is very simple and easy to use. So, to customize your HTML tags inside the post, custom style sheet is used. You can use these tags in your post to highlight some of the quotes in your pages.

While you writing any article you can differentiate the important quotes by using theses tags. Due to this highlight of your important words, visitors will like to read more. In this  video I explained about how to style your HTML tag in detail.

<a href="http://www.linkedtube.com/t9hFSsAUdK8eb0a64cb228935b6b053b9870d218d0c.htm">LinkedTube</a>

Here we are going to see the 5 HTML tag one by one.

  1. Background style for Blockquote
  2. Background style for Blockquote right
  3. Background style for Blockquote left
  4. Background style for pre
  5. Background style for only text.

About these five things I explained  in previous tutorial. So, here I explain about how to style these HTML tag.

Background style for Blockquote tag

Select the content which you want to highlight the line. Then click b-quote in HTML mode. To style your background, copy the below code into custom.css

/* BLOCKQUOTE TAG STYLING FOR PAGES AND POSTS */
.custom blockquote{
font-size:1.2em;
margin: 5px 5px 5px 0;
border:2px solid #42F5EF;
padding: 5px 0;
background:#42F5EF;
color:#111;
}


Background style for Blockquote right tag.

While writing the blog you can highlight some of the text with the help of b-quote right.see the blockquote right

Thesis customization is provided by one of our service
For details use contact page

To style your background color in block quote copy and paste this into custom.css file. You can also change with your own color.

/* BLOCKQUOTE RIGHT TAG STYLING FOR PAGES AND POSTS */
.custom blockquote.right {
width: 200px;
margin: 5px 0 5px 15px;
padding: 5px 0;
border: 3px double #1CEBDD;
border-width: 3px 0;
font-size: 1.4em;
text-align: justify;
float: right;
color:#65AB09;
background:#F5B8DC;
}

Background style for Blockqoute left tag

Select  some part of the paragraph and to highlight in left .see the blockquote left

Thesis customization is provided by one of our service
For details use contact page

To style your background color of block quote left, copy and past this code into custom.css

/* BLOCKQUOTE LEFT TAG STYLING FOR PAGES AND POSTS */
.custom blockquote.left {
width: 200px;
margin: 5px 15px 5px 0;
padding: 5px 0;
border: 3px double #1CEBDD;
border-width: 3px 0;
font-size: 1.4em;
text-align: justify;
float: left;
color:#0C22EB;
background:#CBF5D4;
}

Background style for pre tag

This pre HTML tag is used to show your code in blog post. This is mainly used by tutorial sites like us. You can style your background to show your code. Just copy and paste this code into custom.css

/* PRE TAG STYLING FOR PAGES AND POSTS */
.custom pre {
font-size: 1.5 em;
font-family: Courier, "Courier New", mono;
color: #000000;
margin: 10px;
padding:10px;
border: solid 1px #FFCF81;
background: #F8FFC0;
}

Background style for code tag

To style your some of the text in color copy and past this code into custom.css You can change the color as you own wish.

/* CODE TAG STYLING FOR PAGES AND POSTS */
.custom code {
font-size:1em;
line-height: 1em;
font-family: Courier, "Courier New", mono;
color: #CF1D2F;
background:#C3E6E0;
text-align: justify;
}

see the example for code html tag
Thesis customization is provided by one of our service
For details use contact page

Hope this might useful. Comments are always welcome. Do you have any questions share your queries below?

{ 4 comments… add one }

Leave a Comment

  • PVC stolarija Elatio January 9, 2010, 4:38 AM

    Great tutorial :-)

    Reply
  • Pascal January 9, 2010, 9:30 AM

    Thanks Elatio.

    Reply
  • Mark Hockenberry August 5, 2011, 11:46 PM

    Thanks for getting me into the next level of custom css, working with Thesis!
    Your tutorial is awesome!

    Mark

    Reply
  • NewsGeek April 4, 2012, 12:36 PM

    Awesome article. Thanks a lot for the HTML Tags. Because of this WordPress Blog Customization is now become very easy. From the use of this HTML tags you can change the theme.

    Reply