My Website : Style Sheets

Style Sheets

This page's vital information:

Physical location: ./pages/00_Home/Style Sheets.html
Link here with: <a href="?page=Style Sheets">

There are 2 style sheet styles provided in this package: "pencils" and "blue"

Each of them has two width styles: a narrow and a "wide" style. The "wide" has been set for 1024 pixels wide and the narrow one for 800.

It's up to yourself if you want to use them, or copy them and make up your own style. If you do, then ensure that you have all of the same "classes" and "ids" defined as they are what the software will use to display the web pages, e.g. "id=page_body"

If you use "pencils" as a starting point of your own template, then please read the IE Fixes page.

Style Sheets And The Software

How does the software decide which style sheet to use if there are so many to choose from?

Well, there is a strict order of precedence for this and is dependant on several variables defined in <setup.php>.

The variables we are concerned with here (in no particular order) are:

$my_default_page_style
$my_force_css[]
$my_force_css_width[]
$my_allow_style_change
$my_extra_style_sheet[]

Please read the page about configuring <setup.php> before going any further.

The order of precedence ("i" is highest level) for final style sheet selected is as follows:

$my_force_css_width[]
$my_force_css[]
Cookie style sheet (depending on $my_allow_style_change value)
$my_default_page_style

This means that if (for example) you allow the end user to change the style sheet used to display the page, you have final control over it if there are certain pages that must be forced into a particular style.

A good example of this is on GavsWorld under "My Real Ale Ratings" where I had to force the wide version of the style sheet (regardless of which one is used) to fit in the table since it is very wide. This uses $my_force_css_width[].

Another time to force a style sheet change is if you wanted to have a page on a particular subject with a photo of that subject in the header banner. This would use $my_force_css[] to achieve this.

Note that these enforcements of page style changes are on a page per page basis, so you must specify every page that you want to be different from the cookie style sheet ($my_allow_style_change) or the default style sheet $my_default_page_style

After the page style sheet has been loaded, any "extra" styles (defined by $my_extra_style_sheet[]) are loaded. These style sheets are those styles that the end user wants to appear on every page, regardless of style sheet selected.

Then, any "IE_fixes" required for your extra style sheets (if they exist) are loaded. These must live in the "IE_fixes" sub-directory of the sub-directory "extra" which itself is contained within the "./style_sheets" directory.

A good example of this is on GavsWorld under "Wedding Info" where I decided to give the wedding pages a more personal feel and added font colour changes depending if the paragraph in question was general text, words from me, or words from Helen.