WP CSS Interaction

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 CLASS.

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.

The Simple:Press plugin tries not only to eliminate any leakage from other CSS files but also allows some CSS leakage. For example the fonts used in your WordPress theme. Simple:Press is written so that those fonts are used where possible so your forum matches your website much as possible. At the same time Simple:Press uses it’s own class descriptions and definitions so that when specifying it’s layout it doesn’t overwrite your other website layouts.
Regardless of the steps in place there are times when a WordPress theme or other WordPress plugin’s CSS settings are held over or leaked into the forum layout. When this happens you might see something like misalignment, gaps or other strange looking behavior.
If you suspect there may be some CSS leakage on your forum pages the best way to determine what is going on is to inspect the CSS layout directly in your web browser.

Inspecting CSS

One of the ways 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.

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.

You can download and install Firebug for Firefox here: Firebug :: Add-on for Firefox. If you are not familiar with Firebug we recommend you start with their tutorials and getting started information in their wiki.

Google’s Chrome browser also offers a similar tool in their Chrome Developer Tools.

 

Posted in