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:

<div id="sidebar">


<div class="sidebar">

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

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

<div id="sidebar">


<div class="sidebar">

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:








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; }


#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:

<div id="content">


<div id="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


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.


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