|  | HTML |  |

|  | Splash! |  |

|  | PostScript |  |

| Template Toolkit Examples: Splash! Library: Colours |

| config

|  | colours |  |

text |

# Colours

The splash/config file loads the html/rgb file which defines the 'rgb' hash. This is then aliased to splash.rgb.

The Splash! library creates the user interface components by clever use of some very small graphics. Each background colour requires 4 GIF files, one for each corner. Each of these files is only 8x8 pixels in size and all but a few of the pixels are transparent. The following illustration shows how a button is built up.

| Hello World! |

In this case, we are drawing a blue button on a white background. The table background defines the blue button colour, and the white graphics are put in each corner to match the background colour onto which the button is being drawn. We then clear the border and remove the padding and spacing between table cells...

| Hello World! |

And then shrink it down to the right size:

| Hello World! |

So you only need 4 images for each background colour that you plan to use. Then, for a particular background colour, you can specify any RGB triple to use as a foreground colour.

To save you the hassle of creating new graphics for each background colour, there's a simple Perl script distributed with the Template Toolkit which does it for you. The GIFs have colour maps with just one entry and each pixel is either transparent or set to that colour. The script simply takes an existing GIF, hacks the RGB value in the colour table (all of 3 bytes) and writes the new GIF out again. Instant colour change!

At installation time, this script is run to generate graphics for each of the pre-defined colours in the html/rgb template which gets loaded into 'splash.rgb'. Don't worry about your hard disk being filled with thousands of huge graphics - each GIF file is typically only 54 bytes. so they take up very little space and are exceptionally fast to transfer across a network.

Here's a selection of colours:

| blue50 |

| blue50 |

| blue50 |

| blue50 |

| lilac |

| lilac |

| lilac |

| lilac |

| bud |

| bud |

| bud |

| bud |

| scarlet |

| scarlet |

| scarlet |

| scarlet |

| blue75 |

| blue75 |

| blue75 |

| blue75 |