Theme CSS ‘Leakage’
One of the most common questions fielded on the support forum concerns the display of the forum not being quite as expected. This will often show itself as misaligned icons, borders around images, large empty gaps and a variety of other strange issues. The answer is always the same. These issues are caused by theme CSS defining global styles or – less commonly, another plugin.
CSS stands for ‘Cascading Style Sheet’. When a style is defined for say, a paragraph, (a p element), unless that definition targets a specific paragraph it will be globally applied to ALL paragraphs. The style ‘cascades’ down to all paragraph elements. So the difference between, for example:
.divstyle p { style directives }
p { style directives }
is that the first of these will only apply the defined styles to paragraphs contained in a ‘div’ with a class of ‘divstyle’. The second will apply the defined styles to ALL paragraph elements regardless of their containment.
Inspecting CSS With Firebug
Probably the easiest way to inspect, determine and fix these kinds of CSS problems is using Firebug which is an extension to the Firefox web browser. Firebug is a remarkable tool that can also be used, amongst other things, for finding Javascript conflicts. If you want your site to run smoothly and without problems, this is quite simply the best tool for the job.
The following steps describe how you can use Firebug to inspect the CSS of a web page and we think you will agree just how easy and quick it is to solve those styling issues. This assumes, of course, that you have installed Firebug into your browser.
Step 1: Open Firebug
Once installed, Firebug will place an icon in the bottom status bar of Firefox. To activate Firebug, click on that icon and the Firebug panel will open up in the bottom of the browser.
Step 2: Open the Inspector
At the top of the Firebug panel is a toolbar. Over on the left of this toolbar, next to the Firebug options menu, you will find the Inspector icon. Click on this to put Firebug into ‘Inspector’ mode.
Step 3: Select Element
Once Firebug is in Inspector mode you can move the cursor over the web page to highlight the element you want to inspect. In this example, we are taking a close look at one of the headings on this actual wiki page. Once the desired element is highlighted, click on it to anchor Firebug’s HTML and CSS panels to this element.
Step 4: Inspect the CSS
Once you select your element, the CSS panel of Firebug will display the styling – the CSS directives – that are being applied to that element. Just as importantly, it will also show the source file of that styling and you will easily see what styling is being imposed by your selected forum skin – but will also see any styling that is being cascaded down from your WordPress theme.
And there is more! This is where the real power of the Firebug Inspector comes into play. Not only does it show you the CSS being applied and the source file – you can also edit those styles in the Firebug window! Just click into the style entry and you will be able to change it. You can also add entries or remove entries. And those changes you make are immediately reflected in the display of the selected element above!
Note – these changes are NOT written away to the actual CSS files. They are for experimenting only so you can do no damage. And when you refresh the page, the original styling will be returned. But once you have solved your display problem – it is then just a matter of making real edits to the real files.
