• << The Treeview skin homepage

Changing the Treeview skin's colour scheme

Recently I was asked how to change the colour scheme for the Treeview skin. Here's my response in case anyone else is wondering the same thing.

There are three steps you'll need to take to change the skin's colour:

1. Generate new background images with your required colours for the curved border around page content.

The three image files involved are:

• skins/treeview/contentborder_left.png
• skins/treeview/contentborder_top.png
• skins/treeview/contentborder_topleft.png

The image files that I generated those ones from are included in the package as:

• skins/treeview/contentborder_topleft.basecurve.png
• skins/treeview/contentborder_topleft.basedesign.png

(i.e. these are design-only files, not used by the skin in any way).

You can use an image editor like GIMP or Photoshop to recreate those three images with new colours - if you're not sure how to do it yourself then you could google it or ask a graphic designer to help you.

2. Change the colours of the following icons in the skins/treeview directory:

• first.png
• firstchild.png
• last.png
• leaf.png
• minus.png
• next.png
• nextparent.png
• nextskip.png
• parent.png
• plus.png
• prev.png
• prevchild.png
• prevparent.png
• prevskip.png
• slideleft.png
• slideright.png

3. Change the colours in the CSS to your desired colours.

This involves searching and replacing in skins/treeview/*.css all instances of the background colour #FEFEF9 (the pale yellow background) with your desired background colour, and all instances of the foreground colour #c0c0ff (the purple that e.g. borders the treeview and search boxes) with your desired foreground colour.