Style Sheets

[ Skip to content]

Science and Engineering at The University of Edinburgh

School of GeoSciences

Site Documentation

Section Contents

Styles
Local Stylesheet
Banner Image

How To: Create a Local Style Sheet

If you look at the source of any page you will see that the <head> contains the style sheet definitions:

<link rel="stylesheet" href="/styles/siteStyleBasic.css" type="text/css">
...
<style type="text/css">@import url(/styles/siteStyleLocal.css);</style>

These lines tell the browser where to fetch the style sheets from. (Netscape 4.x does not recognise the @import format and so cannot make use of styles defined by this method. This is made use of to customise styles for later, standards-compliant browsers.) There are some other style sheets associated with the Site menu and (not) printing. So where do these lines come from?

In each case there is a DTML Method containing the style sheet link text. For example, the DTML Method named siteStyleLocalPath contains @import url(/styles/siteStyleLocal.css);.

To implement a local style sheet use the following steps:

Create Style Sheet: Using the ZMI create a DTML Method (not DTML Document) named siteStyleLocal.css (although it could be anythingYouLike.css) in the folder where the new style is to apply. Insert into the style sheet a reference to the site Local style sheet (see example) and the local styles you need. There is an example for the latter in the item on the School Banner background image. Here is an example that sets Headings to purple and text to teal:
```
@import url(/styles/siteStyleLocal.css);

#siteCPanel h3, #siteCPanel h4, #siteCPanel h5, #siteCPanel h6 {
  color: purple;
}

#siteCPanel p, #siteCPanel li {
  color: blue;
}
```
See /homes/ceford/ for an example of the effect of this local style. Note that it was necessary to import the site Local Style sheet (containing the banner background) before defining styles in the folder local style sheet.
Define Style Sheet Path: Create a DTML Method named siteStyleLocalPath (it must have this name). Replace the default content with the full path to your own local style sheet, like this:
```
@import url(/path/to/your/folder/styleSheetName.css);
```
where /path/to/your/folder/ is the actual path to the branch of the site where the style is to be implemented and styleSheetName.css is the actual name of the style sheet (it must have a .css extension).
Platform Test: Check out the results on different browsers and platforms.
Problems: If the styles do not appear to work, first check the page source as seen by the browser, make sure the terminal semi-colon is in place, and then use the W3C CSS Validation Service. If the styles still fail to work you may need to understand more clearly the style sheet syntax and inheritance mechanisms.