Many themes, including StudioPress Themes, tend to use the same CSS styling definition(s) for all of the widgets in a section, like the sidebar. We are often asked the question, “How Do I Customize A Specific Widget?
If you are asking, “why?” Think of the design possibilities of having different widgets having unique backgrounds, different colored text, or a specific height. The possibilities are numerous.
The first thing that you need to do is find the name of the widget that you want to give individual styling to. You can do this by going to your blog and left right-clicking on the screen, then clicking on the View Page Source or View Source {depending on what browser you use}. This will open another window or a notepad that will display the pages’ html.
When WordPress generates the html from the widget code, it gives each widget an ID name and Class name, along with a generic widget class. This is the format:
<li id="widget-id" class="widget widget-specific-style">
Here is what the html may look like, depending on what widgets you are using:
<div id=”sidebar“>
<ul id=”sidebarwidgeted“>
<li id=”text-270086951“ class=”widget widget_text“>
</li>
<li id=”execphp-363872761“ class=”widget widget_execphp“>
</li>
</ul>
In StudioPress Themes, widgets are typically styled in the CSS using a generic definition based on the class {which is “widget”}, that affects all of them. This class is defined using one of these definitions:
- #sidebar .widget
- #homepage .widget
From the html code source above, we can see that the ID name of the first widget is “text-270086951″ from [id=”text-270086951“], which is what we need to customize that specific wordpress widget and the class name is “widget” from [class=”widget widget_execphp“] .
All we need to do now is add a new CSS definition to style the selected widget. In this case, let’s say that we want to add a specific font color and bold the text, plus give the widget a specific height (maybe you are using a flash component that needs this).
In order to affect our selected widget, we use the name that we found above, in the CSS definition:
#sidebar #text-270086951 {
color: #EF000A;
font-weight: bold;
height:100px;
}
Since we only provided settings for three things, the rest of the styling will come from the generic definition through inheritance. That definition, in this example, looks like this:
#sidebar .widget {
background: #FFFFFF url(images/sidebartop.gif) top no-repeat;
float: left;
width: 300px;
margin: 0px 0px 10px 0px;
padding: 9px;
border: 1px solid #DDDDDD;
}
So, if you want to customize a specific widget, then add the additional or overriding setting(s) to the specific definition {#sidebar #text-270086951} . This will override the generic definition.
To clarify this, if your generic definition has a setting for a background color and image, but you want your selected widget to have it’s own unique background color and no image, so that it is different from the other widgets, add the setting to the specific widget definition. Example:
#sidebar #text-270086951 {
background: #9F9F9F none;
color: #EF000A;
font-weight: bold;
height:100px;
}
The background setting in our specific widget definition above will override the defined background setting in the generic widget definition.
There are other ways to customize your WordPress widgets using CSS, like styling specific generic widget classes. This would affect all widgets with the same class name and could be used to give each class a different look through unique styling. But that is all for another time and article.
Now you have the basics and through well thought-out design and a little experimentation on your part, you can create a truly unique sidebar by customizing specific WordPress widgets used in your sidebar.
Note: This tutorial is based on the popular StudioPress/Revolution Themes and while most StudioPress/Revolution themes use the same division names in their code, not all do. Also, if you are using this for a non-StudioPress Theme (tsk, tsk) your Division ID & Class names will be different from the code used in this tutorial.
About Craig Tuller
Thanks. I was just thinking of this. Very timely, again.
you are welcome!
Great walkthrough on this topic!!
Very nice job, Craig. One thing…I think you meant “right click” on the page to get the menu (View Source ), not left click.
Doh! Thanks.
Good pointers! I love the Web Developer extension for Firefox for this – it lets me hover over an element and see the attributes so I can change things up.
(http://chrispederick.com/work/web-developer/)
Great post. Just the info I was searching for. I’m a Revolution Pro Business Theme user and I absolutely love it. I’m also considering an additional purchase of one of the Studio Press themes safe in the knowledge that the quality will be top notch.
Thanks for the info and a great theme.
Karl
You’re welcome Karl!
I know almost nothing about css. I actually understood what you were saying though. Very well explained. Thank you
Max
Glad I helped.
Thanks. It’s helpful to me!
you’re welcome.
Thank You very much – this was very helpfull.
Best wishes from Berlin!
You are welcome, Berlin!
We bought your Lifestyle theme. You have nice support listed by the buy button:
Benefits include the Lifestyle theme, unlimited theme support answered by our experts, customization techniques with our detailed theme tutorials and professional design services available by our list of recommended designers.
Where do we get support questions answered. We have basic ones… like how to convert the “R” to photos that go with blogs and how to link the catagory buttons to the catagories we create for the blogs.
You can get your basic questions answered in the General Discussion Support forum.
The usability and sheer number of plugins to fit any type of blog is probably the number one reason why I love WordPress more than any other blogger platform out there.
Somebody has to recommend it. Firefox Firebug:
https://addons.mozilla.org/en-US/firefox/addon/1843
It’s great for ripping apart css and divs. I have the Web Developer plugin mentioned above, but can’t say that I’ve ever used it.
Great post.
Have to agree 100% with Justin: I could not live without Firebug!
I totally agree. It is probably my #1 most-used tool.
Just purchased the Corporate and need to have a Flickr connection to it so it will display my pictures, how do I do that?
Thanks for buying. Step 1 … Ask how on the Support Forum.
This was very helpful Craig. I remembered you writing it before, then needed it today and it was really easy to implement!
~ Paul
Thanks for the post. I added an image to my customised widget (enhanced recent posts). Is it possible to make that image a link? How would I alter the “background: url(images/sidebartop.gif)” code?
Also is it possible to add text in the stylesheet for a widget? I want to add some at the bottom of the populating recent posts.
Thanks!
Anything is possible, ask how on the Support Forum.
Hi,
Do you know if there is a way to assign the ID manually, instead of targeting the auto-generated ID? It makes a lot more sense to have semantically meaningful IDs, and it’ll keep your CSS tidier.
Something like this: http://bit.ly/ciCg9k
I’ve been looking for days, but I can’t seem to find anything about it.
No I don’t, but will keep my eyes open for any technique that does this.