Important Note: The contents of this document applies ONLY to version 5.x.x of Simple:Press. It likely does NOT apply to version 6.x.x (our latest version).
One of the 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. These issues most commonly are caused by the WordPress theme’s CSS defining global styles or – less commonly, another plugin.
What is CSS?
The Cascading Style Sheets Specification (CSS) is a computer language that is used to write formatting instructions (rules). These rules tell a web browser how webpage content should ‘look’.
CSS can define colours, backgrounds, borders, margins, alignment, fonts, sizes and loads of other things for almost any part of your web pages.
CSS rules are added to a webpage either by writing the code directly into the top of the webpage HTML, or by linking to a separate file. A separate file containing only CSS rules is commonly referred to as a ‘stylesheet’, and has the extension .css (dot-C-S-S).
A cascading style sheet (CSS) contains style definitions that are applied to specific elements in an HTML document. CSS styles define how elements are displayed and where they are positioned on your page. Instead of assigning attributes to each element on your page individually, you can create a general rule that applies attributes whenever a Web browser encounters an instance of an element, or an element assigned to a certain style
WordPress , Simple:Press and most plugins use CSS to style pages on your website.
Theme CSS ‘Leakage’
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 unless it is reset or overwritten somewhere down the line.
There can be several CSS files in use at one time on a webpage. That means the CSS that your WordPress theme uses is in affect at the same time the Simple:Press and other plugins are. In most cases it is not an issue but there are times when one CSS style will ‘leak’ into another area and that style is used instead of what was originally intended.
With Firebug you can inspect and manipulate live CSS rules. It offers options for adding, editing and removing CSS styles of the different files of a page containing CSS. Furthermore it offers an editing mode, in which you can edit the content of the CSS files directly via a text area.
Google’s Chrome browser also offers a similar tool in their Chrome Developer Tools.