Hi Thesis theme users! Hope you have already satisfied with your thesis theme. You know that our thesis theme looks minimalist. Some bloggers don’t agree with the word minimalist when you use it regarding thesis theme. I am also. You can’t tell it like that. Because thesis can bend and blend as per our wish. Ok. Now i am going to show you how to customize the side bar heading in thesis theme. After learnt this tutorial, you can able to add boxes in side bar heading, change colors of background and text, change font sizes and padding.
In this tutorial, I have included the video & css style sheet code also. Watch the video tutorial. It shows how to do the customization.
If you can’t watch the video, then follow the below steps to complete customization of side bars.
1. Normally thesis theme Simple side bars. You want to customize it as per the colors and fonts which you have used in thesis. I have customized my theme as shown in the above video tutorial. I give my
code also here. What you should do with this code is, just change the colors, fonts and padding, and paste it your custom.css style sheet.
Here is the code:
.custom .sidebar h3{background-color: #00B8B8; -moz-border-radius: 4px; padding: 0.1em 0.1em 0.1em 0.5em; font-weight:bold; font-size:1em; color:#ffffff;}
2. Now i show you how to add this code in your custom.css. Go to your wordpress dashboard. Click on ‘Custom File Editor’ under ‘Thesis Theme options’ in bottom left navigation of dashboard.
3. You can see custom file editor box there. Make sure you are going to edit in ‘custom.css’. Because there will be three options.
1. Custom.css
2. Custom_function.php
3. Layout.css
4. Just paste the above code in custom.css. Now you can go and see your sidebars with rich look. You can simply change the color by replacing the color code given in the above code. You can also change the font size of side bar texts by replacing the font size in the above code. If you want to change the width and height of the side bar heading boxes, simple increase the padding mentioned in the above code.
Hope I helped you to customize your thesis sidebars. If you have any questions just leave a comment here or contact us using contact form. You can also check my other thesis tutorials in our blog or watch all the video tutorials in our YouTube channel.
Related Tutorials:
- How to Place Different Background Color for Each Sidebar Heading in Thesis Theme
- How to Add Background Image for Sidebar Heading in Thesis Theme
- How to make Post Sub heading box and change its Background Color in Thesis Theme?
- How to Change sidebar widget background and Border in Thesis Theme
- How to add Social Bookmark Icons at Right Side of the Post in Thesis Theme
{ 31 comments… read them below or add one }
How to add the same background color as you have added in your blog.
Do you need background color for your sidebar heading or site?
I’m glad I’ve found this tutorial through Google. Thank you sharing this!
you are welcome, we have lot of tutorial in our site. it is very useful for you. for more video tutorials subscribe our site and youtube video channel.
hai vivek,
In your custom.css file in header css code brfore the background: #333 url you are having /* but there is no close comment line like */
thats why your next code sidebar h3 is not working.
also in sidebar h3 code padding:0 1em; between 0 and 1 is space not hyphen.
hai suresh
Any idea for changing footer sidebar title background color alone;
plz plz
hai wilander,
in your footer widget css code.
change #footer #footer-setup h3 {background-color: #111;}
change #111 into any other color code.
Hi Fourblogger thanks for your tips. Do you know how to make a sidebar heading font in thesis all to lowercase letters? I tried “text-transform: lowercase;” and it doesn’t work
hai Riri,
Do you want your sidebar heading lowercase?
use the below code in style.css file
.sidebar h3 {font-variant: small;}
by default it will be like the below
.sidebar h3 {font-variant: small-caps;}
Just replace small-caps with small in style.css. we cant do this with custom.css file.
the style.css path is wp-content/ themes/thesis17/style.css
Keep in mind when you upgrade new version of thesis style.css change wont automatically upgraded.
You should do it manually again.
Thank you for helping out with this! Finally got it figured out after finding this tutorial! Very helpful…
I can’t get any changes to apply to my sidebar styling …
hai Heidi,
I checked your site there is no sidebar style code in custom.css file.
first add the css code and if you have any problem the leave a comment..
Oh sorry! Deleted it because it wasn’t working. Put it back in, and still not working. Thanks!
hai Heidi,
the sidebar code is working fine..
In your custom.css file you added two close brazes
}just before the sidebar h3 code.remove one braze the color will be display…
Ah, such a silly, simple fix. Thanks so much!
Congratulations for your blog. I’ve found many interesting posts which helped mine.
How can I add a border for each of the widgets in the sidebar. The border must include the headlines, just like yours.
Thanks a lot!
Hi Fourblogger,
thanks for this, it styled my sidebar headers nicely. However now I am getting the following every time I use the Design Options save button:
Warning: Invalid argument supplied for foreach() in /home/sacred1/public_html/wp-content/themes/thesis_18/lib/classes/options_design.php on line 468
Warning: Cannot modify header information – headers already sent by (output started at /home/sacred1/public_html/wp-content/themes/thesis_18/lib/classes/options_design.php:468) in /home/sacred1/public_html/wp-includes/pluggable.php on line 890
Is this related?
love your tutorials. keep up the good work. thanks.
Excellent! This is just what I was looking for. Thank you for this.
hey. thanks for this great post. unfortunately its not working on my blog. i’ve tried it so many times but no luck. please can you help?
thanks
Do all the codes that you provide here are only for Thesis theme? I think its not going to work for other themes. I have tried some codes but its not showing any results as such.
Wow, I now implemented this on my blog. Thank you so much.
Works like a charm. Definitely bookmarking this site!
Very useful, thanks.
I placed this entire code: custom .sidebar h3{background-color: #00B8B8;
-moz-border-radius: 4px; padding: 0.1em 0.1em 0.1em 0.5em; font-weight:bold; font-size:1em; color:#ffffff;}
in my custom.css and nothing happened. Nothing changed. Any idea why?
I’m using thesis 1.8.2
hai Jonathan,
Just add . (dot) infront of custom .sidebar h3 that is it should be .custom .sidebar h3 { }
Better provide your site link.
Hi Fourblogger,
I see the navigation default font is all CAPITAL LETTERS. How can I use upper and lowercase letters in the navigation menu?
Thank you.
Eric
hai Eric Bloom,
In your custom.css file add the below lines..
.custom .menu a {
text-transform:none;
}
It will remove the uppercase letters from the navigation menu.
if i want to add image rather than the text ….then what i need to do ??
please to tell me …BTW nice post …im learning thesis from your blog….appreciated more n more.
visit this tutorials, You can add background image in heading instead of text also,
thanks man.. i really needed to customize the thesis sidebars
{ 2 trackbacks }