Style Widgets

This document is deprecated! The information on this page refers to a Thesis version that is now obsolete. Please visit the Thesis Docs for current documentation.

Apply Styles to All Widgets ∞

Standard Widgets all receive the class of .widget assigned to them, so this can be used whenever you want to apply the same styles to every widget. Here are some examples:

/* Make all widget headings red */
.custom .widget h3 {
   color: red;
}

/* Specify bottom padding on all widgets */
.custom li.widget {
   padding-bottom: 15px;
}

/* Specify bottom margin on all widgets */
.custom li.widget {
   margin-bottom: 2.769em;
}

Apply Styles to Individual Widgets ∞

To style individual widgets, first determine their unique class or ID by viewing the source code of a page on your site (or using FireBug). For example, here’s the opening code for the Categories widget on the Answers blog:

<li class="widget widget_categories" id="categories-411758441"><h3>Categories</h3>

So, to style that specific widget, we can reference it like this in custom.css:

.custom li.widget_categories h3 {
   color: green;
}

Or, we could alternatively use the unique ID:

.custom li#categories-411758441.widget h3 {
   color: green;
}

The ID method is particularly useful when you have multiple text widgets on the page, and need to distinguish between each one. Here’s an example of the opening code for a text widget:

<li class="widget widget_text" id="text-280006071"><h3>Random Text Widget</h3>

So, to style that text widget in custom.css, we’d use this:

.custom li#text-280006071.widget h3 {
   color: yellow;
}

Style Archive Drop Down Widget ∞

Place this code in custom.css, and adjust to your requirements:

.custom li.widget_archive select {
   border: 1px solid red;
   color: blue;
   font-size: 1.5em;
}

Specify Image as Heading ∞

This is an example using the ID of the Random Text Widget from above:

.custom li#text-280006071.widget h3 {
   height: 46px;
   background: url(images/twitter.png) no-repeat;
   text-indent: -9999px;
}

Note that the image is being stored in the custom/images/ folder.

Also, remember that you’ll still need to determine the unique class or ID for each widget, as noted under Apply Styles to Individual Widgets, and use it in the selector name in your CSS rule.