Finding Your CSS Styles

The following isnt about choosing a WordPress Theme, but finding the CSS styles within your current Theme. Often a problem occurs in one part of the layout or template. For instance, there is a border you dont want between the sidebar menu and the rest of the page. You hunt and hunt but you cant find any reference to the border. Now what?

Playing CSS Detective

Lets begin by playing CSS detective. You know where the problem is, you just cant find the problem. In the above example, you need to hunt for an errant border.

Begin by carefully examining a generated page (or test page) and look for some identifying text in the sidebar, near the errant border. Lets say that listed in the sidebar, you have a post title called “All About Harry”. You know you will find that title in your sidebar when you view the pages source code.

To view a page source code, go up to the menu bar of your browser and choose VIEW > PAGE SOURCE or VIEW > SOURCE. A page will pop up featuring the source code of the page.

Use your handy detective tool, Ctrl+F, to activate your search. Type in “all about harry” and click FIND. Odds are, unless you have the words “all about harry” in your post, it will take you to the first showing of the phrase “all about harry” which is probably in your sidebar. If not, hit FIND again until you have found the right phrase in the right area.

If you are using Internet Explorer, an alternate method is to use the Internet Explorer Developer Toolbar, which allows you to visually see and select the elements, IDs, and classes on the page. It displays the elements within the hierarchy of the page, their CSS attributes, and can outline DIVs, tables, etc. You can download the Toolbar from Microsoft.

Once you have found the phrase, its time to play CSS detective. Look up through the code from the phrase “All About Harry” for one of two things. It will look something like either of these, using words like sidebar, menu, or sidecolumn