Seven tips for changing color in Thesis Theme

Thesis theme is one of the best theme for wordpress. It has more number of features. For blogging thesis theme is very useful and also user friendly.

In this post I am going to give  seven tips for thesis theme color changing. It is very useful for thesis users.

Those are Link color, content Text color, content background color, sidebar text color, sidebar background color, footer background color and navigation menu color.

For doing above 7 Tips watch our video tutorial

In case you  can’t watch our video, follow below steps.

How to change content or page text color in thesis theme?

For changing content text color

  1. Go to wordpress admin
  2. In wordpress admin, go to thesis option. Then click custom file editor and paste below code in custom.css.
.custom .format_text p {
color:#ff0000;

}

3. Then click save. Go and refresh your site now.

Text-color

How to change content or page background color in thesis theme?

  1. In wordpress admin, go to thesis option. Then click custom file editor and paste below code in custom.css.
.custom #content {

Background-color:#ADDBDE;
}

2. Then click save. Go and refresh your site now.

background color of content

How to change sidebar text color in thesis theme?

  1. In wordpress admin, go to thesis option. Then click custom file editor and paste below code in custom.css.
.custom li.widget {

color:#30BD20;

}

2. Then click save. Go and refresh your site now.

sidebar text color

How to change sidebar background color in thesis theme?

  1. In wordpress admin, go to thesis option. Then click custom file editor and paste below code in custom.css.
.custom #sidebars {
Background-color:#eee;

}

2. Then click save. Go and refresh your site now.

Background color of sidebar

How to change link color in thesis theme?

  1. In wordpress admin, go to thesis option. Then click custom file editor and paste below code in custom.css.
.custom a, h2 a:hover, #logo a:hover{
color:#1B14E0;
}

2. Then click save. Go and refresh your site now.

link color

How to change Footer background color in thesis theme?

  1. In wordpress admin, go to thesis option. Then click custom file editor and paste below code in custom.css.
.custom #footer {

Background-color:#111;

}

2. Then click save. Go and refresh your site now

Footer color

How to change Navigation menu color in thesis theme?

  1. In wordpress admin, go to thesis option. Then click design options after that click navigation menu option. You can change there link text color, link text hover color, current link text color, current parent link text color, hover background color, current background color, nav border color, submenu width (px) etc.
  2. Then click save. Go and refresh your site now.

Update to the post

How to change post tittle color in thesis theme?

1. In wordpress admin, go to thesis option. Then click custom file editor and paste below code in custom.css.

.custom .headline_area h1 {
color:#32963F;
}

2. Then click save. Go and refresh your site now.

default color

After changing color

After adding color

If you have any problem about above things write in comment box. i will help you.

If it is useful for you, share your experience in comment box. For more checkout our all Thesis theme tutorials..

{ 43 comments… add one }

Leave a Comment

  • aviationMY January 5, 2010, 8:50 PM

    hai,

    could you show me, how to change post title color from default black to whatever color i want to??

    i didn’t find any tutorial to change the title color for post/article in thesis

    please!!

    Reply
  • Pascal January 5, 2010, 9:48 PM

    Hi Thanks for your query. I have updated the post with the info you asked. Check and get at the end of post.

    Keep Reading.

    Reply
  • aviationMY January 7, 2010, 5:59 PM

    ok..thank you, btw, how to make the headline bolder??

    i put
    .custom .headline_area h1 {
    color:#32963F;
    font-weight:bolder;
    }

    but it wont work!

    Reply
  • Pascal January 7, 2010, 6:44 PM

    In your code

    font-weight:bolder;

    change this into

    font-weight:bold;

    Now it will work.

    Reply
  • sachi January 9, 2010, 8:51 PM

    How to have a color box below the title and for subtitles. (Like the one you have used for subtitles)

    Reply
  • Pascal January 9, 2010, 10:07 PM

    Hi Sachi, Yes. We have already made a post about that here. http://fourblogger.com/how-to-make-post-sub-heading-box-and-change-background-color-thesis-theme/

    We have coded subtitles which are in h2 shown as box and colored. If you want just copy and paste the code given in the post and whey you make post, give subtitles as h2 tag.

    Reply
  • sachi January 10, 2010, 9:46 AM

    Thanks,
    But can the same done to the title of the post

    Reply
  • Suresh January 10, 2010, 10:05 AM

    The same code you should replace .format_text h2 with .headline_area h1 to get background in post title.
    you can change your post title background color also.

    Reply
  • robert January 15, 2010, 7:36 AM

    Awesome stuff, is it possible to keep my nav menu color settings as they are, but change the color of my other “active links” to a different color (for some reason they were grey, so you couldn’t see the text!

    Reply
  • Pascal January 26, 2010, 1:08 AM

    Hi Robert,
    Yes It is possible. Very easy to do it. Thesis 1.6 made it very easy.

    You have to do this.

    Go to ‘Design Options’ under “Thesis Options” in Wordpress admin dashboard.
    Then expand “Nav menu”.
    Then change the color of “Current background Color”. To change color click on the current available color. Color picker will expand. Then choose your wished one.

    If you don’t want to change background color and only want to text, then change the ‘current link Text color’.

    Hope you got it. If you need any help, just leave a comment here.

    Reply
  • Bangaloreloka January 22, 2010, 12:06 AM

    I was playing with this and also changed my comment hyperlinks to other color compared to the content hyperlinks..

    The code — .custom h2 a:hover, #comment_list a{
    color:#000000;
    }

    Perhaps, useful for everyone :)

    Reply
  • Suresh February 27, 2010, 2:19 PM

    hai..

    Thank you.. keep on reading..

    Reply
  • Suresh February 27, 2010, 2:18 PM

    hai victoria..
    you can get more tutorials on fourblogger youtube channel..

    Reply
  • Mark March 25, 2010, 8:37 PM

    Can you change the link color of only the prev- next post in thesis? I have my sidebar background color: darkgrey and my #content background white. I have the primary links set in thesis design options for #ffffff.

    I need the links appearing in the #content be another color than white.

    Thanks, Mark

    Reply
  • Mark March 25, 2010, 8:49 PM

    already discovered it:

    .custom #content a { color:#000000; }
    .custom #content a:hover { color:#000000; }

    thanks anyway

    Reply
  • Laura May 28, 2010, 5:10 AM

    Do you have a tutorial on how to add a custom image to sidebar titles? So lets say I create a an archives graphic in photoshop and how would I add it to the thesis theme. I haven’t found anything like that on the web.

    Reply
  • Suresh May 28, 2010, 10:53 PM

    hai Laura,

    Currently we dont have tutorial for add graphical image in sidebar heading..
    If you want you can add background image for sidebar heading with our tutorial
    see this

    Reply
  • enad June 7, 2010, 3:42 PM

    nice tutorial but it’s not what im looking for. id like to know how to place the navigation menu below the header and add logo to the header then make the whole header transparent with only the logo shown. i also would like to know how to make the nav border color transparent. i hope you can help me.

    thank you.

    Reply
  • Suresh June 8, 2010, 4:08 PM

    hai enad,

    To change navigation below header use the below tutorial
    http://fourblogger.com/how-to-change-the-header-image-above-nav-menu-in-thesis-theme/
    to add transparent header logo follow this tutorial
    http://fourblogger.com/how-to-change-the-header-image-above-nav-menu-in-thesis-theme/

    Reply
  • Sam June 24, 2010, 9:50 PM

    I need just my sidebar primary links to be white seperate from content and heading what is the code for that?

    Reply
  • Pascal June 25, 2010, 4:48 AM

    What’s your site link? Just now! Launched new 3 months program. You can make use of the forum for thesis theme.

    Reply
  • hank jazzbop August 26, 2010, 7:54 PM

    Hello! I’ve managed to change my Site Title color in custom.css (Thesis 1.8 theme) with:

    #logo, #logo a {
    color:#0099FF;

    But how to I change the Site Title hover color? I’ve tried

    a, h2 a:hover, #logo a:hover {
    color: #FF0000;

    - but this doesn’t work. Hope you can help!

    Reply
  • Lucien September 8, 2010, 10:06 AM

    Hello,
    I have been fighting for hours without success in changing these colors of the nav menu:
    * link background color
    * hover background color
    * current background color

    I want to set all these background colors to “none”, i.e. transparent.
    Regular thesis (1.8) options seem not to propose this possibility.

    I tried several modifications of the custom.css without success…
    Help please! :)

    Reply
  • Gustavo October 31, 2010, 8:31 PM

    Hi Pascal, I want to change the color of the links of the text of my post (when I include a link copy of post and links in sidebar widget) to orange (#D97811)
    I’m using this code in CSS: .format_text a { color: #D97811; }
    The problem is:
    - is NOT changing the color of the links in the sidebar widgets (they are still blue)
    - It’s changing the color of the “read more” bottom, which I want to keep the default color of the skin I’m using

    Any suggestion?

    Thanks,

    Gustavo

    Reply
  • Louise November 24, 2010, 3:13 PM

    Hi Pascal…this is a really helpful post thank you. I’m just wondering though if it is possible to have a different link colour in the sidebar from the main body text?
    Louise

    Reply
  • Jason December 7, 2010, 10:32 PM

    Please Help, When I paste any of the above code into my CSS editor, nothing happens. Any suggestions?

    Reply
  • Kristin Moore January 24, 2011, 9:53 AM

    Hi, I have used some code to change the format of my side bar menu’s. But, now I have added a custom menu for pages on just one page (www.twistarsusa.net/college-recruits) and it does not use the same formatting as my other side bar menus. Would you be able to tell me how to change that menu to match the others.

    Thanks so much!

    Reply
  • Pascal January 25, 2011, 8:08 AM

    contact us through contact form to hire us to get done any thesis customizations. thanks for commenting.

    Reply
  • mazdodot March 26, 2011, 6:46 AM

    Hi..Thank You for ur post , very very helpful for me…and any question , Can i replace hyperlink nav menu ‘Home’ to the other link so for nav menu ‘About’ and another nav menu?…thanks before.

    Reply
  • BLOG404 May 17, 2011, 6:34 AM

    Awesome tutorial . And is there any way to have different colors for the title of different widgets in sidebar like the thesis blog possess .. Would be happy if you explain that too :)

    Reply
  • blog yazarı May 30, 2011, 4:14 PM

    hi, thank you for your explain
    but can you say me
    how i can change my sidebar background colors
    if i have 2 sidebar?

    Reply
  • Raj July 25, 2011, 4:19 PM

    how to change the selected text colour (which by default is blue)??

    Reply
  • admin July 25, 2011, 4:26 PM

    Where you want to change the text color?

    Reply
  • Raj July 25, 2011, 5:57 PM

    when i select the text (which we do to copy the text)?

    Reply
  • salsta October 6, 2011, 1:44 AM

    Great tutorial! I was wondering how do I add an image to my side bar? I’m also running a 3 column layout, sidebar 1 – body – sidebar 2. Need to place picture behind the first sidebar1 on left hand side. Can i use your same side bar code for changing the color:

    .custom #sidebars {
    Background-color:#eee;

    }

    And then modify to the code to:
    .custom #sidebars {
    background: #EBEBEB url(‘image url’) 50% 0 no-repeat;
    }

    Is this possible??????

    Reply
  • Suresh October 7, 2011, 8:59 AM

    Hai salsta,

    For sidebar 1we should uses sidebar_1 instead of sidebars. Check the below code
    .custom #sidebar_1 {
    add background here..
    }

    Reply
  • Chukwuka Okwukwe Chukwuka November 17, 2011, 1:36 PM

    Hi! Suresh,

    Supposing I want to my background color to show in-between my features and sidebars, how do I do that?

    Reply
  • Suresh November 17, 2011, 5:41 PM

    hai,
    Add background image for content box and adjust the x-axis position to fix color between sidebar and feature posts.

    example
    #content_box {
    background: ("paste image image uploaded url") repeat-y scroll 63.4em 0 transparent;

    }
    the above code you can adjust x-axis position from 63.4 em.
    The image should small in width and height.

    Reply
  • Ankit @ Geek Revealed December 25, 2011, 9:11 PM

    Really impressed with your tutorials they are simply the best. Actually, this blog helped me to customize my blog so much, and the most I important thing is that I was not good at html and css scripting. I followed each and every step in your tutorials and thesis customization looked like a cake walk.
    Thanks a ton :)

    Reply
  • Mike @ conversion vans December 30, 2011, 3:19 AM

    How to change post tittle color in thesis theme?

    “Tittle” is a typo in your article above near the end.

    Anyways.

    How do you change headings and font text hover color WITHOUT overriding the same in the Navigation Color Settings. With each change I make it’s overriding the nav menu color settings as well.

    Reply
  • Rasel Rony March 5, 2012, 6:56 PM

    thanks for the tutorial, I could change the colors of my thesis theme

    Reply
  • wandisini June 10, 2012, 9:25 PM

    thanks for the tutorial. it’s great

    Reply
  • Gouri June 12, 2012, 11:29 PM

    Yet again came to Four Blogger searching for thesis customization :)

    Reply