How To: Replace the Banner Image

The default School Banner image is a segment from a satellite view of the Earth taken from the Blue Marble. This is defined as a background in the style sheets. To replace the banner image proceed as follows:

1. Select a suitable image. This needs to be rather dark at the left where it will be overlapped by the school name in white. About 300 pixels at the left needs to be School blue (#00cc99). If the image does not naturally grade it would be best to put a gradational transparency from 200 to 300 pixels from the left end. The final image needs to be a jpeg 1600pixels wide by 128 pixels high. Upload the image to the branch folder where it will be used. An example banner image:

    
     Try changing your browser width. 
     Notice how the background image  
     always fills the browser width.  
    
   

2. In the branch folder, use the ZMI to Add a DTML Method named siteStyleLocalPath and give it the title 'Path to style sheet' (n.b. DTML Method NOT DTML Document). In this document replace the default content with this:

   @import url(/path/to/folder/siteStyleLocal.css);

   where /path/to/folder/ is the actual path of this branch folder. This path appears in the page as seen by the browser and is used to fetch the style sheet.

3. Use the ZMI to add another DTML Method named siteStyleLocal.css and change the default content to look like the following:

   @import url(/styles/siteStyleLocal.css);
   
   #siteBannerCluster {
     background-image: url(/path/to/your/image.jpg);
   }
   
   

   You must change '/path/to/your/image.jpg' to the full path of the image you have uploaded, not forgetting the leading /.

4. If the image does not appear check the page source in the web browser to verify the Local style sheet path is correct. Then check the Local style sheet to see that its content is correct.

This recipe will not produce an image in Netscape 4.x beciuse it does not display backgrounds correctly.