Tag Archives: source code

How to Find Widget Names for custom.css

If you want to style your widgets in custom.css, the first thing you have to do is find their names so you can address them. This is not at all obvious, though once you know how to do it, it’s easy. Here’s how:

Bring up the page with your widgets in a browser and then view its source. Usually this is found under the “View” menu pulldown at the top of the page and is named “View Source” or “Page Source.” Then find “widget.”

There will be three kinds of widget names you will find, two for text widgets and one for other kinds of widgets.

The first kind of text widget name will be a long string of numbers after an “id.” If you have a lot of text widgets, it helps to identify which one it is by looking for the header between the <h3> tags. If you have not given a header name to your text widgets, you might have to temporarily name them in order to tell them apart. Though the long string of numbers seems random, it never changes:

Text widget with a long number
Text widget with a long number

In your custom.css file, you would address the text widget like this:

.custom #text-283725271.widget {

The header for the same text widget would be addressed:

.custom #text-283725271 h3 {

The second kind of text widget has a shorter number, often one digit. It looks like this:

Text widget with a short number
Text widget with a short number

Other kinds of widgets will be listed by name. In the following example, we see the categories widget listed as “widget_categories.”

Other widgets are found by name
Other widgets are found by name

You would address this kind of widgets in your custom.css like this:

.custom li.widget_categories {

I hope this helps you with your widget customization. Remember, you are welcome to make comments or email me using the “Contact” button.

©2009 Thesis Theme Tools. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!