Widget Header - Image Before
Today, I will be explaining how to get a background image for your widgets for Thesis theme. This is a very simple technique that anyone can do. Please make a back up of your custom.css file.
From the image attached (Before), you can see my donations widget.
Notice the widget header (tag <h3>) has a diffent colour font to the background, this can be done by reading my past post on Thesis Customizations – Unique Tips. It is also very easy to do, just takes a few seconds to see your changes.
What we are going to do is make an image the background of the widget header, sounds easy right. Well, it is 
With just a few seconds you can achieve this.
The first thing is to get your image button, you will have to create it yourself or you might have one.
I have choosen this image for my background. It has a piggy money bank with some notes and coins next to it. Although I made it a green colour, it looks very plain. I guess this is just an example so it’s ok
You will be able to change the the following:
- font size
- font name
- font normal or bold
- font colour
- height of the image for the header
- and the image itself
There are a few options for you to look at and you might have to play around depending on your settings.
If I want to replace all widget headers with this back image, then I would use the following code:
.custom li.widget h3 {font-family: Comic Sans MS; font-weight: bold; color: #FFFFFF; font-size: 1.5em; height: 45px; background: url('/images/widget_img_donations2.png') no-repeat; padding:13px 20px 0;}
If you want to get a specific widget then it becomes a bit more technical:
BUT don’t worry, it’s still easy. You will need to view your source code of your site. For this purpose, I have choosen to chage the donations widget. I will have to search in my source code where the wording is and find the widgets class id. Once I have that, it’s easy.
The image below shows the class id as text-453310734, it’s highlighted with red. Yours could be different depending on which widget you are going to change.
Widget Header - Source Code
The only difference between changing all and just a certain widget is the class id, before the curly bracket. The rest would be identical.
.custom li#text-453310734 h3 {font-family: Comic Sans MS; font-weight: bold; color: #FFFFFF; font-size: 1.5em; height: 45px; background: url('/images/widget_img_donations2.png') no-repeat; padding:13px 20px 0;}
The image below shows you the end result of what it should look like. You can always change the the image loacation if you want, the choice is yours.
- Widget Header – Image After
Final Thought
I hope this has helped you understand Thesis more and what it is cappible of. I would like to hear feedback if some tried it and if it worked for you or not.
I am the proud owner of Serradinho.com and have made this my second home. I'm into blogging, downloads, WordPress, meeting and helping others, etc. Basically the internet in general :) Serradinho Web Services is my own company whereby I offer my services to clients. This ranges from web design, website upgrades, theme customizations, support, premium WordPress plugins and many more .....
View all posts by George Serradinho, there might be other posts that interest you.
{ 16 comments }
Nice tutorial! Anything that helps people learn how to hack and customize their own theme is a great thing in my mind – losing the fear of touching code can really give bloggers some powerful abilities.
.-= Barbara Ling, Virtual Coach´s last blog ..How to make and write a Provocative ebook Table of Contents TOC =-.
@Barbara – yes, bloggers have to be confident about making changes and seeing the results.
Thanks for sharing Thesis customization tuts once again… I guess searching images for your sidebar content is a difficult one…
.-= Compute Live´s last blog ..Rearm and Extend Office 2010 Activation Grace Period for Free 180 Days Usage =-.
@Compute Live – you could create your own ones. Try iconfinder.net for cool icons
This is wonderful tutorial of Thesis theme.You can trained new bloggers and thesis lover fast.
.-= Surender Sharma´s last blog ..How to Integrate Flickr Album on Your Wordpress Blog =-.
@Surender – thanks man, means a lot.
I am amazed at your knowledge of Thesis. Everytime I read your tutorial, I come one step closer to making the leap. Once I get a little time, I will probably make the switch.
BTW, thanks for the surprise in my ec account, much appreciated!
.-= Tycoon Blogger´s last blog ..Win Cash and Prizes for voting for me =-.
@Tycoon – I finally made the choice and left Entrecard. I tried it and dropping is not me at this stage, I feel my time is better spent doing other things.
Don’t worry about the surprise, I gave out 11,000 EC out to people.
Hey Great tutorial George. This will come very handy
.-= Thesis customization service´s last blog ..Get Most out of Feed Burner Free Email Subscription Offer =-.
@Harsh – hey, milk that keyword
Cool tutorial! Customizing the header of widgets will make a normal thesis theme look a bit different. Thus, being the odd man out! And this is really needed in the Blogging world- UNIQUE IDEAS.
@Tech-Freak Stuff – The problem with header widgets, is if you have specific header widgets.
Nice tutorial . It seems easy. Keep on writing this kind of tutorials, it is helpful for all bloggers.
.-= Ruchi´s last blog ..Similarities between Programmer and Politician =-.
@Ruchi – thanks, I have a few coming out this month to help others out.
Hey George – another skin change. I like this design a lot. This is a great little tutorials. Tweaking your sidebars is one of the best and easiest ways to make your site unique.
.-= Somone´s last blog ..K to O of Essential Blogging Tips And Tricks =-.
@Somone – yes, the sidebars can change the look and feel of a site.
Comments on this entry are closed.
{ 5 trackbacks }