Replacing Background Images

How you go about replacing the background images in your template will depend on how your template is constructed. If you are using a badly written template that has the code for the appearance of the page jumbled together with the HTML then you need to go to the Format menu and select the page Colors and Background option to make the changes to the background of the whole page. To change the background on selected elements within the page you will need to select the element, right click and select Advanced Properties to get access to change the background.

If instead you are using a properly designed template with the appearance defined in an external stylesheet then you need to access that stylesheet to make the changes. NVU contains a complete stylesheet editor in addition to the content editor that we have already seen and so here we will take or first look at how to access that second editor within NVU.

To create or edit an external stylesheet (or even one that is to be placed within the page itself) you need to go to the Tools menu and select CSS Editor. If your template contains a link to an external stylesheet the filename will appear at the top of the white area at the left of the editor. If instead your template contains an internal stylesheet at the top of the page you should see the name "Internal Stylesheet" instead of a filename. If you don't currently have a stylesheet and want to create one then use the Link Elt. button to create an external stylesheet or the Style Elt. button to create an internal one.

Double click on the stylesheet name to display a list of all the rules contained in the stylesheet.

Stylesheet Editor left column rule selection

Select the rule to be update for example let's say that we want to change the background for the entire page so we select the body rule. Thos will change the content of the main part of the page to display a series of tabbed forms where we can change the properties of this rule. In this instance we want to change the background so we select the Background tab.

Stylesheet Editor right column background tab

We can now change the entries in the stylesheet for both the background colour (visible if the image can't be displayed or is not defined) and also the background image that we want to have display. The Tile dropdown allows us to select whether the image is to be tiled to fill the background and if so in which directions.

To update other background images within the page simply select the appropriate rule that references that element and repeat the process.

We will look further at how to change the appearance of your page by setting up stylesheet rules in later tutorials.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow