Extras - Adding background page colour
 

A common layout technique is the use of a background page colour. It is quite easy using the FORMAT > PAGE COLOURS AND BACKGROUND menu option (see below). Another way you can do it is to edit the HTML 'source code' for your page. It sounds daunting, but it is actually quite easy to do. Check out the Step by Steps below:


The standard method

Setting a page background colour


As indicated above, all you need to do is use the FORMAT > PAGE COLOURS AND BACKGROUND menu option (see below). When the first dialogue box comes up, click on the radio button 'Use custom colours' (arrowed in red), then click on the bottom 'swatch' next to the word 'Background' (arrowed in blue). This will give you the colour palette for setting the colour.

TIP: The Page colours and Background dialoguealso gives you options to change how links look on your page. You can change the default colours for links (i.e. the dark blue for an unused link) for your page. This may be useful to fit in with your particular site design colours.

   
Step 1 - The source code method

The Site Manager button




First you have to switch to Source Code view in Kompozer.

Arrowed at A in the screen shot is the Source tab.Click on that and you will see the HTML code that maks up your web page.

On a blank page there won't be much code, but the important bit is near the top, just below the 'Head' section you will see the 'Body' description lines (arrowed at B in the screen shot).

 

   
Step 2 - Pasting in new code

New site box



This code needs to be changed. It can be simply changed by retyping, or most commonly, you can copy and paste the code in that you want.

To get a black background, copy the two lines below and paste them into the section as highlighted in the screen grab.

<body style="background-color: rgb(0, 0, 0);">
</body>

When you're done, click on the Preview or Normal tab and you should see your page - this time in Black!

   

Step 3 - Changing the colour

New site box

 

To change your page colour, you need to change the three RGB code colours for the Body.

You can do this by manually typing them in in Source view. But what numbers do you need for your colour?

The simplest way to get the RGB values is to start a new blank page, type some text into it, highlight the text and then use the colour text option. This will give you the dialgue box on the left.

When you have the colour you want, note down the RGB values (circled in red in the screen grab) and type them into your sourc code. your page can then be the custom colour you want.

 

   
Back to Step by Step