Changing Colours

For the first worked example of making a configuration change, we're going to assume that you don't like our rich pink backgrounds and would prefer something in orange with dark red text. (Actually, you'll probably want more pastel shades, but we'll leave you to your own perversions - we like bright colours). The first step is to select the colours you'd like and for this some kind of colour picker is definitely useful - the excellent Gnu Image Manipulation Program (Gimp) has a very suitable one of these. To invoke the Gimp, either go to your Applications -> Graphics menu or type: gimp at a command line prompt.

[Tip]Tip

Do remember to make sure that the foreground and background colours you pick have a good level of contrast between them to ensure readability.

Once you've got the colour picker up, you can use the vertical rainbow column to choose the general colour you're looking for and then the larger area to the left of it to choose the exact level of saturation. Here we've picked a modest orange (!) and if you look over to the right, we're shown it's hexadecimal RGB value (aka web colour) which is ffce22. We then do the same procedure and pick a nice dark red, which in this case is 720a1d. Armed with these values, we need to just capitalise the letters, add a hash and we have the web colours - #FFCE22 for the background, and #720A1D for the foreground.

We then go to our wacs.cfg file and find the section labelled colours. This will look something like this:

 <colours>
  <foreground>#000000</foreground>
  <background>#FFE8FF</background>
  <setbackground>#FFB0FF</setbackground>
  <vidbackground>#FFFFB0</vidbackground>
  <dvdbackground>#B0FFB0</dvdbackground>
  <divider>#FFA0A0</divider>
  <mastheadforeground>#F0D8F0</mastheadforeground>
  <mastheadhighlight>#FFA1FF</mastheadhighlight>
  <mastheadbackground>#000040</mastheadbackground>
  <indexcolours>Y</indexcolours>
 </colours>

The two entries here we are going to change are foreground and background with the background being the orange and the foreground (text colour) being the dark red. The new entries will be:

  <foreground>#720A1D</foreground>
  <background>#FFCE22</background>

Once we've made this change and write the file, the change should be immediate with the new colours displayed in all their glory! And in fact, here's a sample screenshot with the new values:

Bet that got you reaching for the sunglasses! Still, the red text is actually working quite nicely, but we probably need to tone down that orange a little bit. Still, the point is you can change it. Do remember that many of the headings and banners on pages are using the masthead colours instead and you might wish to make those complimentary, but possibly reversed to those shown here. In fact, you could use exactly the same values in reverse, which results in a page something like this:

  <mastheadforeground>#720A1D</mastheadforeground>
  <mastheadbackground>#FFCE22</mastheadbackground>

Actually I think the orange looks better as a text colour on the darker red, but there you go. As with all things, some experimentation is in order if you want to find a pleasing combination. Hopefully this has given you some idea of how to control the colours in WACS.