Many themes, including StudioPress Themes, tend to use the same CSS styling rules for all of the widgets in a section, like the sidebar.
To customize a specific widget, you’ll need to edit your style.css file in your WordPress theme. You’ll find this in your theme’s folder on your server (wp-content/themes/your-theme-name/style.css) and you can also access it within the WordPress dashboard. Go to Appearance – Editor. You’ll see the style.css file for the activated theme at the bottom of the list of files on the right and this file will be open in the editor for you by default.
CSS Rules – a very brief explanation
In the style.css file you will see lots of lines of code that look similar to this:
#wrap {
background-color: #fff;
margin: 15px auto;
overflow: hidden;
padding: 0 0 20px;
width: 980px;
-moz-box-shadow: 0 1px 2px #999;
-webkit-box-shadow: 0 1px 2px #999;
}
These are CSS rules. Each CSS rule has two main parts: a selector, and one or more declarations.
W3schools.com has a great diagram that illustrates CSS Syntax.
Finding the name of the widget you want to style
The first thing that you need to do is find the name of the widget that you want to give individual styling to. The easiest way to do this is by using the Firebug plugin for the Firefox browser. While viewing your blog, put your cursor over the widget you want to style and right click. You will be able to view the source code (html) and see the name of the individual widget. Alternately, you could right click anywhere on the screen while viewing your site and then click on View Page Source or View Source (depending on your browser.) This will open another window that will display the pages’ html
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 selectors:
- #sidebar .widget
- #homepage .widget
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. Here is what the html may look like, depending on what widgets you are using:
<div id="sidebar" class="sidebar widget-area"><div id="text-353240355" class="widget widget_text">
From the html code source above, we can see that the ID name of the first widget is “text-353240355 which is what we need to customize that specific WordPress widget and the class name is “widget” (from class=“widget widget_text”.)
All we need to do now is add a new CSS selector to style the selected widget. In this case, let’s say that we want to add a specific font color and bold the text.
In order to affect our selected widget, we use the name that we found above, in the CSS definition:
#sidebar #text-353240355 {
color: #CC0099;
font-weight: bold;
}
Since we only provided settings for two items, the rest of the styling will come from the generic rule through inheritance. That rule, for this example, looks like this:
#sidebar .widget {
background-color: #fff;
border: 1px solid #ddd;
padding: 10px;
}
So to customize a specific widget, add the additional or overriding declarations to the specific selector {#sidebar #text-353240355}.
For example, the generic rule above has a setting for a background color of white (#fff), but suppose you want your selected widget to have its own unique background color of black (#000) and you don’t want any borders on your widget. You would then add the declarations to the specific widget rule like this:
#sidebar #text-353240355 {
background-color: #000;
border: none;
color: #CC0099;
font-weight: bold;
}
The background and border declarations in our specific widget rule above will override the background and border declarations in the generic widget definition. However, your widget will still retain the 10px padding which is specified in the generic rule.
So that’s the basics. If you’re new to CSS, I would encourage you to take the time to review the tutorials on W3Schools: http://w3schools.com/css/
