11 Css Tricks for Thesis Theme Customization

This tutorial will give an idea about how to style your web page. The Css (cascade style sheet) code is very important while adding any functions to your theme. If you are not adding any css code in your web page, it having all the theme functions inside the theme but not arranged in a page format to see in better visibility. At the end of this tutorial I am sure you can get some ideas about writing css codes for your web page.

In internet number of thesis theme customization tutorials are available. No need to hire thesis expert to customize your thesis theme. This tutorial helps you to do customization by yourself. If you get the code from any tutorial in online, after placing the code in custom functions and css file. Its working fine but you won’t get the style exactly what you need in your web page.  In order to get your webpage as you like you must adjust custom.css code that you have got from online. Here I give you eleven css tricks.

Class or id in custom functions code

In custom_functions.php code we have some class and id name which is available inside the <div> or <ul> or <li> or <form> and etc. This class and id name is used to style your web page area between <div> </div> or <ul> </ul> with respect to the class or id name. The below example give you clear idea.

function function_name{
<div id="menu">
Some html code here
<ul class="menu_item">
Some html code here

The above function id name is menu and class name is menu_item. In your css code before the id name you should add # and before class name add . then style your webpage. Css code for above code.

For id=”name”

.custom #menu { }

For class=”name”

.custom .menu_item { }

Within the brace you can add background, color, margin and etc. The above function <ul> </ul> available inside the <div> </div>. So if you are not giving any css code for class name then the css code inherited from id name but not vice versa.


In most of the css code we have padding and margin. So we need to know the difference between padding and margin. First padding, padding is empty space within the div or ul or li and etc. If you want empty space in left side of the div you can use the keyword called padding-left. We can leave extra space within the div in any side top, right, bottom and left.

Don’t use padding-left, padding-right key words it may slowdown page speed. Use one keyword padding.

padding:5px;   padding: 5px 10px;   padding: 5px 5px 10px 0px;

padding:5px; it leaves space 5px within the div in all sides top,right,bottom and left.

padding: 5px 10px; it leaves space  within the div 5px for top and bottom, and 10px for right and left.

padding: 5px 7px 10px 0px; it leaves 5px in top, 7px in right, 10px in bottom and 0px in left. If you need padding only left use padding: 0 0 0 5px;

The below image violet color shows padding:0.5em 1em 1.5em 2em;

padding displayed in violet color

Css code for padding

.custom #menu { padding: 5px;}


Margin is similar to padding the only difference is padding leaves space within the div or ul area. But in margin it leaves the space outside the div or ul area. All procedures are same for padding.

The below image yellow color shows margin:0.5em 1em 1.5em 2em;

Margin shown in yellow color

Css code for margin .custom #menu { margin: 5px;}

It leaves space 5px outside the div in all sides top,right,bottom and left.

NOTE– In some versions of internet explorer margin-left and padding-left is displayed with double pixel example if you give padding-left:10px; is displayed 20px in some versions of IE. This problem only in margin and padding left not in other side like top or right or bottom. To avoid this use display:inline; in your css code.


We can add background color or image for your div or li. For background color background: #111111; here 111111 is a hex code for black color you can change any color. This background color cover the padding area but not margin area.

For background image

background: url(“give your image path url”) repeat scroll 0 0 transparent;

The above code you can give a bit of image no need to give the entire size of the div. by using the repeat function. The small image covers the entire area. Instead of repeat you can use no-repeat, repeat-y, repeat-x.

Repeat-y is the image repeated only in y-axis. If you need line in y axis you can add image of 1px size then use repeat-y instead of repeat you can get vertical line. The above code after scroll we have two zero. First one is for horizontal position second one is for vertical position. If you are -10em instead of first zero the image moved left side      -10em Instead of zeros you can use left, center and right keyword.


Border- you can add border to your div or ul or li and etc. border displayed around the div or ul area. This also covers padding not margin. Border css code is similar to padding and margin.

border: 1px; it shows 1px in all sides

border: 1px 2px; it shows 1px in top and bottom and 2px in right and left.

border: 1px 0px 2px 1px; it shows top, right, bottom and left respectively.

border-style: solid; if you are not giving solid it shows double line when your border width high. border-color:#ff0000; ff00 is hex code for red you can change it as your wish. The below image shows  border and background color:#fff1bb;

Border and background color


Float is a keyword that used to align the position of the entire div or ul or li. In float we have three options left, right and center. The below example will give better idea.

If you are having ul inside the div as mentioned the above custom_function.php code. Div having much larger width than ul. In custom.css you can use float:right in nav_item. Your entire ul is aligned right side within the div.

.custom .menu_item{ width:75%; float:right;}


Text-align is a keyword that is used to align the text inside the particular div or ul or li. You can use left, right and center. It is similar to float, float is for entire div but text-align is for text within the div.

.custom .menu_item{ text-align:center;}

a and a:hover

a is keyword used to style link inside the div or ul. a:hover is the keyword that is used to change the link style when we drag the mouse on the link. We may add color and background and etc for the link.

The above image gives different style for link and link hover in headline.

Text p

For paragraph text you can use the key word called p. here you can use font-size, color, font-family, font-weight, line-height. Example to change the text inside div id.

.custom #dividname p {
font-size:14px; color:#111; font-family:’arial’; font-weight:bold; line-height: 15px; }


To style headline you can use the key word h1, h2, h3. h4, h5 and h6 you can use different format like text. Heading is similar to paragraph. If you have link in heading use h1 a, h2 a like that. Also use hover by specifying h1 a:hover{}.

Width and Height

If you need width and height for a particular div. Use width and height in percentage of the div like 100%  or 75%.

.custom .menu_item {width:25%; height:100%; }

The above code gives width of the each menu_item (ul) is 25 percentage of menu (div). I hope now you have an idea about styling the webpage. Share your experience in comment section.

For more checkout our all Thesis theme tutorials..

{ 16 comments… add one }

Leave a Comment

  • aviationMY February 9, 2010, 8:58 AM

    Hi,its me once again and another again.

    this tutorial is good for user that wants to crate something different from another Thesis customization…thank you for the tutorial..

    but the fact is…margin, padding, and moreover float work well when rendered in Firefox and Chrome…when Internet Explorer rendering this CSS codes..its look slightly different..some different is to small, some different is pretty obvious even change the position of the customization.

    but we can’t isolate IE because most of the traffic comes from IE browser, especially for people that too blur about the computer…major visitors come for IE browser…Cybercafe sometimes didn’t install Firefox..Chrome?? forget about it..its just my opinion based on my point of view..

    Firefox and Chrome??..I’m a loyal Firefox user..but i had to admit that Chrome is faster than Firefox…its pretty obvious..no one can deny that..but when it comes to rendering CSS..Firefox just much better…

    well….lets use Firefox guys….

    @Microsoft- get your IE browser an {-ie-border-radius: 4px;} haha…

    @Fourblogger.com- your blog has [ 80, 700, 000 ] search result in Google?? wow..i just type in fourblog and the search result came out…you have to start a SEO tutorial from right now! hope to learn some SEO tips from you..

    • Suresh February 9, 2010, 11:50 AM

      Once again thanks aviationmy for your suggestion. Normally in Internet explorer some versions like ie6, margin-left
      displays double pixel example if you give 10px in margin-left it displayed as 20px and padding-left also have the same effect in some vertions of IE.
      To avoid this use display:inline;

      for border radius
      for mozilla
      use -moz-border-radius:4px; for IE you have specified already..

  • Suresh February 9, 2010, 11:51 AM

    thanks vivek…

  • Tinh February 9, 2010, 1:54 PM

    Great tips list. Thanks for your email. I will do it very soon

    • Pascal February 9, 2010, 2:19 PM

      Thank you tinh. keep reading our blog.

    • Pascal February 9, 2010, 2:23 PM

      Hi Tinh,

      Thanks. Hope you will like the thesis guide which i sent. Soon i want to hear from you.

  • Tony M February 14, 2010, 9:06 AM

    I’m loving these Thesis tutorials. One nice I just picked up and wasn’t aware of was the use one padding tag and the four numbers. I’ve used both but didn’t know about that simple trick.

    Thank you.

    • Pascal February 14, 2010, 10:20 AM

      Glad about you got help from this tutorial.

  • S.Pradeep Kumar May 14, 2010, 7:58 PM

    I tried this tutorial on my demo blog and got error codes on the first post excerpt. Any idea what might have caused this problem?

    Screenshot :


  • S.Pradeep Kumar May 14, 2010, 8:00 PM

    Sorry sorry.. my previous comment was supposed to be made on this article..


    Regret it!

    • Suresh May 15, 2010, 12:23 AM

      hai Pradeep,

      I saw your screenshot the error not because of teaser tutorials..

      In your wordpress post editor html mode check ..if you added any java script or not?

      I think some in complete javascript are there in your post editor for the particular post..

  • vara March 7, 2011, 3:07 PM

    The visual explanation is very nice.

  • monty June 27, 2011, 8:41 AM

    Could you please help me with adding spacing to my h1 title tag? I don’t want the h1 right on top of my text. If you can look here for a reference. http://imgur.com/delete/mCfTGzitGjCUVaG

  • Anuj@improve google pagerank January 12, 2012, 2:13 PM

    Firstly thanks mate appreciate it. This is one a a very small number of thesis sites that I have book marked — I come back to this site again and again, thank you for all your hard work.

    Secondly I am using a skin from thesis themes and therefore have no idea on how to adjust the function php and do it that way i.e. by creating a custom page template — because the skin uses a custom page template for a “portfolio style” page.

    That being said would you recommend another way — and why would removing the sidebars via css NOT be optimal ?

    Appreciate your help

  • Vijay April 11, 2012, 11:23 PM

    Nice info for customizing Thesis theme. Thanks again… !

  • Clifford Blodgett May 19, 2012, 1:24 AM

    This is a great tutorial, we are building out sites with thesis and these little snippets help me identify ways to make Thesis my own, muhahahaha.