编辑“WordPress:Finding Your CSS Styles”

The following isn't about choosing a [[WordPress:Using Themes|WordPress Theme]], but finding the CSS styles within your current Theme.  Often a problem occurs in one part of the layout or [[WordPress:Templates|template]]. For instance, there is a border you don't want between the sidebar menu and the rest of the page.  You hunt and hunt but you can't find any reference to the border.  Now what?

==Playing CSS Detective==

Let's begin by playing CSS detective.  You know where the problem is, you just can't ''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.  Let's say that listed in the sidebar, you have a post title called "All About Harry".  You know you'll find that title in your sidebar when you view the page's source code.

To view a page's 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've 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 [http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&DisplayLang=en Microsoft].

Once you've found the phrase, it's 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''':

<pre><div id="sidebar">

or

<div class="sidebar"></pre>

This is the main section that contains your sidebar menu.  You've found the first suspect.

Now, open your <tt>style.css</tt> file and do another search for '''sidebar''' or whatever the resulting name was that you uncovered.  It is usually identified in two ways:

<pre>#sidebar

or

.sidebar</pre>

Look in the styles under these CSS '''selectors''' and see if there is a mention of border, often looking something like this:

<pre>#sidebar {position: relative; float: right; width: 170px;
    color: blue; font-size: 90%; border-right: solid 1px blue; }</pre>

There is your border, the criminal!  If this is the guilty party, delete the reference to the border and you are good to go.

If it isn't, the hunt continues.

Sometimes the culprit is the one you least suspect.  Maybe the border is not caused by the obvious suspect, the ''sidebar'', but by the '''content''' section.  Return to the generated page source code and search for the first words of your post.  Look above that for something like:

<pre><div id="content"></pre>

It could be called '''content''', '''page'''. '''post''', '''maincolumn''', '''widecolumn''', or have another alias, but it should be the CSS ''container'' that holds your post information.  Now, go back to the style sheet and check to see if there is a border in that section.

==Frisk the Style Sheet==
If all of these fail, the CSS detective never gives up the hunt.  Return to the hiding place of all styles, the <tt>style.css</tt> file, and ''frisk it'' by doing a search for "border" and look carefully at each suspect.  Note the selector ID name, like '''sidebar''', '''menu''', '''content''' and '''page''', and then go back to the generated page source to see if that might be your culprit.

You can also select the border suspect you've found on the style sheet and '''cut and paste''' it into a TXT file (like Notepad) that just sits open on your computer like a scratch notepad.  Make a note of which selector name you removed it from like this:

 Removed border: solid 2px green from #content

Then save the edited <tt>style.css</tt> and upload it to your site. [[WordPress:I_Make_Changes_and_Nothing_Happens|Refresh]] the generated test post and see if the unwanted border is gone.  If so, you found the culprit.  If not, return to the Notepad and copy the code and put it back into your <tt>style.css</tt> in the "content" section, putting things back where you found it.

If you do find your culprit, do a little dance, squeal and cheer, and make others suspicious and nervous when they are around you.  The CSS detective solves another CSS crime!

==More CSS Troubleshooting Help==
* [[WordPress:CSS Fixing Browser Bugs]]
* [[WordPress:CSS Troubleshooting]]