WordPress:Finding Your CSS Styles

The following isn't 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 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?

以下不是关于选择一个WordPress 主题，而是关于找到你现用主题中的CSS样式的。通常一个问题发生在设计或者模板中的某个部分。举个例子，在你的边栏和页面其他部分之间的，有个相接的边，你不想要这个边，但是你无论如何都找不到相关的内容，该怎么办呢？

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.

启动 CSS 检测

让我们从启动 CSS 检测开始。你知道了问题在哪，你只是不能找出问题，在上面的例子中，你需要找的是不定边线。

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.

从仔细检查生成的页面(或者是测试页面)开始，在边栏中不定边线旁边寻找一些识别文本。比方说在边栏的列表中有一个文章名为"All About Harry"，你在查看页面源代码时就知道在边栏中也同样会看到它。

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.

想查看源代码，找到浏览器上部的menu bar，选择VIEW > PAGE SOURCE or VIEW > SOURCE。源代码页面就会显示出来了。

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.

使用手边的检测工具，Ctrl+F,来激活你的搜索，输入"all about harry"然后单击FIND.除非"all about harry"这句话在你的帖子内，否则它会显示出第一个出现"all about harry"的地方，很可能是你的边栏。如果没有，请再次点击FIND直到你在正确的地方找到合适的词。

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.

如果你正在使用Internet Explorer，另一种方法就是使用Internet Explorer扩展工具条，你可以在页面上看见并且可以选择元素，ID，类别。它分层显示出页面的元素，它们的CSS属性，和DIVs, tables, 等等的轮廓。你可以从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:

or

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

你一旦找到这个词语之后，就是启动CSS检测的时候了。查找从"All About Harry"开始的代码，它会检查一些类似的词，使用如sidebar, menu, 或者sidecolumn这些词语:

或

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

#sidebar

or
.sidebar

现在，打开你的style.css文件，然后再做一次对sidebar的搜索，或者别的什么你没有涵盖的词语，通常有两种结果：

#sidebar

或
.sidebar

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

#sidebar {position: relative; float: right; width: 170px;

    color: blue; font-size: 90%; border-right: solid 1px blue; }

查看CSSselectors中的样式，看是否有提到边线，通常会看到这样的结果：

#sidebar {position: relative; float: right; width: 170px;

    color: blue; font-size: 90%; border-right: solid 1px blue; }

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:

有时问题就出在你最最忽略的地方。可能边线不是由某些明显的东西sidebar造成的，而是由于content这部分造成的。回到生成页面的代码，找到你的文章的第一句话，然后向上查看如下内容：

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.

可能会被叫做content, page. post, maincolumn, widecolumn或者别的名字，但是都应该是CSS 容器掌握着你的文章的信息。现在回到样式表，查看在那部分里是否有边线。

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 style.css 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.

搜索样式表

如果上述方法都失败了，CSS检测不会结束。返回到所有的样式隐藏的地方，the style.css文件，然后通过一个关键词为"border"的查找，搜索它，仔细看每个另人怀疑的地方，标记搜索器的ID，如sidebar, menu, content and page，然后回到生成页面的源代码查看是否找到问题所在。

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

你也可以选择你在样式表中所找到的可能是问题所在的边线相关内容，复制粘贴到一个如同草稿本一样打开的TXT文件中(如记事本)，把搜索器中你删除的的名字做个记录，如

Removed border: solid 2px green from #content

Then save the edited style.css and upload it to your site. 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 style.css in the "content" section, putting things back where you found it.

然后保存编辑过的style.css文件，上传到你的站点，刷新生声的测试页面然后看是否你不希望出现的边线消失了。如果消失了，那么你找到了问题所在，如果没有，返回记事本，把代码复制回style.css文件的"内容"部分，把你找到的东西放回原位。

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!
如果找到了问题所在，跳个舞，尖叫一声，干个杯，再去处理别的问题。CSS检测又解决了一个问题！

More CSS Troubleshooting Help

• 修复浏览器错误
• CSS问题发现并处理