This video tutorial explains about how to style our sidebar widgets. Normally thesis theme 1.6 sidebar widgets are very simple. In order to look our sidebars pretty we need to Style your widget background and text area. sidebar give the better impression to our visitors so we need to concentrate more on sidebar widget element customization. Normally thesis theme widget similar to the below image.
Before
To style your widget text area by copy and paste the following code in custom.css file.
/*side bar widget area link style */
.custom li.widget ul li{
background:#F0F0F0;
border: 0.1em solid #C7C7C7;
-moz-border-radius:4px;
padding:0.5em;
margin:0.5em;
}
- For do this login your wordpress admin
- Choose ‘custom file editor’ under thesis options in left sidebar of the wordpress dashboard.
- Select custom.css file and click on edit selected file.
- Paste the above code and save it. Then visit your site.
The above code is to style the sidebar widget text link area only not to style the whole widget area.
The above mentioned code you can change text area background color. The widget text link area contains Line height, font size of the text link. If you want to modify your widget text font Just add font-size: 1.5em; this code is not to change the widget title size. You can also remove border if you don’t want.
You can also style your widget area by adding the following code in custom.css file
/*side bar widget bacground*/
.custom li.widget ul {
background:#444;
border: 0.1em solid #C7C7C7;
-moz-border-radius:4px;
padding:0.5em;
}
For do this follow the above four steps.
The above code contains the background of the widget area. Styling widget title is not included in this code to style widget title click here. Once you pasted the above codes your side bar widgets shown like the below image.
After
Share the experience in comments with new widget style in your sidebar.
For more checkout our all Thesis theme tutorials..
{ 41 comments… read them below or add one }
Thanks Pascal for this tutorial, I was just looking for this tutorial. You blog is awesome, keep up your good work.
You are welcome. Keep on reading. We have more customizations.
Hi, pertaining to your tutorial above,
how to add background color, image or border in different widget, Ive tried your tutorial it works like charm, thanks.
but like, let say, popular post, random post, top commentator etc. i want a to add a different background color to make it very2 easy to indicate. like the sidebar heading:
***hey maybe you should add this in your tutorial.***
.custom li#random-posts h3 {text-align: center; font-weight: bold; font-size: 1.3em; color: #FFFFFF; padding: 0px 5px; background: #FD453B6;}
so hows pascal? i tried to use the same way like the code above but i dont know how to change from the heading to background code…i hope you could fix this for me..
thank you!
Thank you very much for sharing friend. But is widjet or widget? i added codes but nothing changed.
you are welcome. Yes that is widget only. you can change now, it will work.
And may you tell how can I add 3 column footer to thesis?
we are already posted. click follow link you can get answer for your question. thanks
http://fourblogger.com/create-3-column-footer-for-your-thesis-theme/
ok, I got it, thank you so much
And i have a question also. How can i entegrate gallery plugin (fancy-transitions-featured-gallery) to thesis or any slide show plugin? Please help me.
let you soon we will put post for your question.thanks..
Thanks Pascal. I was listening to your tutorial yesterday on YouTube and now implementing then on a test site. Will shift to thesis very soon
You are welcome sriraj. you can customize your thesis theme as your own wish.
WOW-WEE! That was awesome!
Great tutorial… All of your videos
are great!
Thank you, so much Pascal!
Thanks Tony. Do you use Thesis Theme?
Yes, my partner has it. Configuring site
as we speak. Will be uploading it soon.
If it were not for your tutorials
we’d be lost!
Thanks again!!!
Graet thesis customization tutorials are here i think.
Thanks Tanmoy. We have made all tutorials with videos. You can get all videos here http://youtube.com/fourblogger
Thanks for the nice article man. It helped me a lot!
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. you should add */ this line in header css otherwise remove /* in ths same line.
Thanks for tutorial. However, my column order is S1 content S2. And when I apply your code to css only sidebar 2 changes. How can I also change S1?
Give your site name, then only we will rectify your error.
Thankyou. That was just the thing I was looking for.
How do I add frames/borders around each of my FOOTER sidebar widgets so there is no space between theme? Something like the example you have above but without the dark background and keep the frame? I just want to add frames/borders to the content in my footer widgets ( I have four footer widgets installed and I used your footer widget tutorial).
Thanks,
Rachel
Very nice tutorial. Thanks !!
Nice info about Thesis theme. I used this theme on my WP blog. Good tips.
useful informative site. keep it up.congrats
Hello,
I used all of your code above and it worked perfectly for my widgets which contain custom menus. BUT, I added an additional custom menu on one of my pages, and some of the formatting is not applying to that one widget. The colors are good and match the original sidebar widgets. But on this page http://www.twistarsusa.net/college-recruits/ each of the links has too much padding (they’re too fat). Do you know how I can apply the same styling to this custom menu?
Thank you!
contact us through contact form to hire us to get done any thesis customizations. thanks for commenting.
Thanks pascal, you always come up with the best thesis TUTORIALS on the net, keep up the good work, and keep posting them good thesis video tutorials.
Hello,
Didn’t seem to work with mine using Thesis 1.8
Rick
this is what i am looking.. thanks for the tutorial..
hey Pascal
this is also what I am looking for
but it does not work
I pasted the code to the custom.css, but there is no effect.
does it work for the newest Thesis version?
all the best
Hai Martina,
This css code will work any version of thesis theme. Once again try it.
Hai Martina,
In your sidebar widget dont have list items so just relplace the below line
.custom li.widget ul li {with
.custom li.widget {and style your sidebars..
Suresh
It works!
patience is golden, asking questions when we need answers
thanks a lot:)
M.
thanks a lot for this posting! a long time i was searching for this information about how to change a widget background!
Glad this post helped…. Thank you for using our tutorial.
Hey, wanted to see if there was a way to remove the side bar completely from certain pages. I want these pages also to be a full width page so extending to the sidebar area.
I am using Thesis Theme too.
Any help would be really appreciated….also love the new skin you guys made…thinking about getting it myself!
Jonathon,
Look for this tutorial Remove sidebar on specific post and remove sidebar on pages and modify as full width.
Glad you like our thesis skins I hope it helps
you describe this is for thesis theme . Is the way is same for all others theme ?
I used the code above to try and change my background color and nothing happened. I also used the one in your book copy and pasted it and the same thing happened. I am not sure what else I need to do.
I am also trying to get a side bar in my footer like the one on this site http://www.gillickcopy.com/
Not sure what to do to get it there exactly like this with the footer border color as well. Any suggestions would be greatly appreciated.
Thanks.
Michelle