Changing stylesheets
Internet Explorer 4+, Opera 7+, Gecko (Mozilla, Netscape 6+ etc.), KHTML/WebKit (Konqueror 3+, Safari, OmniWeb 4.5+) and iCab 3+ allow you to choose from a selection of styles and layouts in most parts of the site. Use the drop-down menu to choose a style. Your browser should remember your selection with a 5 year cookie. (See the end of the navigation panel on this page.)
Disabling stylesheets
Warning: disabling stylesheets will prevent most DHTML from working.
Most good browsers offer a way to disable stylesheets, allowing your browser to use the default font and colour settings you have provided.
- Opera 8+
- Preferences - Advanced - Content - Style options -> untick 'Page style sheet' for whichever mode you are using
- Opera 7
- Preferences - Page style -> untick 'Page style sheet' for whichever mode you are using
- Internet Explorer on Windows
- The only way to disable stylesheets is to edit the windows registry (Start - Run - 'regedit') and changing the value of
the following key to 'no'
'HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\Use StyleSheets'
- Internet Explorer on Mac
- Preferences - Web Content -> untick 'Show style sheets'
- Konqueror
- Settings - Configure Konqueror - Stylesheets - General -> switch to 'Use accessibility stylesheet defined in "customise"-tab'
- iCab
- Preferences - Style Sheets -> untick 'Enable Style Sheets'
- Netscape 4
- Preferences - Advanced -> untick 'Enable style sheets'
- Mozilla, Firefox, and Netscape 6+
- Does not allow you to disable style sheets
- Safari
- Does not allow you to disable style sheets
- OmniWeb 4.5+
- Does not allow you to disable style sheets
Setting font and colour preferences
- Opera 8+
- Preferences - Web pages
- Opera 7
- Preferences - Fonts and colours
- Internet Explorer on Windows
- Tools - Internet Options - Colours / Fonts
- Internet Explorer on Mac
- Preferences - Web Content
- Netscape 4, Mozilla and Netscape 6+
- Preferences - Appearance - Colours / Fonts
- Firefox
- Options - Content - Fonts & Colours - Advanced
- Safari
- Preferences - Appearance
- OmniWeb 4.5+
- Preferences - Font & Color
- Konqueror
- Settings - Configure Konqueror - Konqueror Browser - Appearance
- iCab
- Preferences - Style Sheets - Fonts & Language / Page Display
Most good browsers also allow you to change the text size or zoom using the View menu.
Creating a user stylesheet
Ok, I admit it, I am not an artist. I cannot make the site look perfect for everyone. BUT, the design of the site should allow you to change the layout and design of these pages to suit your own needs.
User style sheets are just like normal stylesheets. You can create them with a text editor or CSS editor. To make sure that your browser uses your styles in preference to the main page stylesheets (only required if you cannot disable stylesheets), you should use the !important declaration for most styles.
Some Mac browsers may not allow you to select your chosen stylesheet. If this happens, use a text editor like BBEdit to open the file and 'save as' using a new name. The browsers should be able to use this new file.
- Opera 9
- Tools - Quick preferences - Edit site preferences - Display - My style sheet -> put in the location of your style sheet
- Opera 8
- Preferences - Advanced - Content - Style options - My style sheet -> put in the location of your style sheet
- Opera 7
- Preferences - Page style - My style sheet -> put in the location of your style sheet
- Internet Explorer on Windows
- Tools - Internet Options - Accessibility - Format documents using my style sheet (select the stylesheet to use)
- Internet Explorer on Mac
- Preferences - Web Content - Use my style sheet (select the stylesheet to use)
- Netscape 4
- Does not allow you to define user style sheets
- Mozilla, Firefox and Netscape 6+
- Save the stylesheet as 'userContent.css' in the following directory:
MozillaProfilesDirectory\ProfileName\someRandomName.slt\
- Safari
- Preferences - Advanced - Style Sheet
- OmniWeb 4.5+
- Does not allow you to define user style sheets
- Konqueror
- Settings - Configure Konqueror - Stylesheets - General -> switch to 'Use user-defined stylesheet' (select the stylesheet to use)
- iCab
- Preferences - Style Sheets -> use 'New' to add Custom StyleSheets
Try using this stylesheet ... (does nothing in iCab 2)
Exposed elements for the stylesheet
These pages do not provide a site signature. If you really need that level of control, I suggest you try a browser that allows you to set site-specific styles, such as Opera 9+.
As you might imagine, some of these pages are very complicated. However, most of them use a simple outer structure of elements:
<h1>Page heading</h1>
<div>Ignore this</div>
<div id="index">
<h2 class="accessible">Navigation</h2>
<p class="accessible"><a href="#content">Skip navigation</a>.</p>
<h3>search heading</h3>
<form>
<p>
<input type="text" class="searchbybut">
<input type="submit" class="searchbut">
</p>
</form>
<h3>group heading</h3>
<ul>
<li><a href="..">title</a></li>
...
</ul>
...
</div>
<div id="content">
...main content...
</div>
<address>Contact information</address>The main content usually begins with a h2 heading, followed by content that may have further sub headings. Content may contain lists (mostly on pages like the script lists, search results and email lists). The lowest level heading used is h6, as part of the search results. Tables are used only where they make sense (such as browser support tables). Structural elements used in the main content are: h2-h6, p, pre, blockquote, ul, ol, li, dl, dt, dd, div, a, code, var, kbd, samp, q, span, dfn, del, ins, em, strong, img, table, caption, thead, tbody, tr, th, td, form, fieldset, legend, label, input, select, option, textarea (some pages also use iframe).