Design a colour scheme

qdPMThis article describes how to create a new green colour schemes using Skins.

Before editing .css files, it's good practice to make sure you create a copy of the existing file.

Skin files

The site's installed colour schemes are stored in the following directories:

  • /css/skins/blue
  • /css/skins/dark
  • /css/skins/default
  • /css/skins/grey
  • /css/skins/red

By default, users get the grey skin. Inside the /css/skins/default directory are the following files:

  • img/
    • menubaritem_submenuindicator.png
    • menuitem_submenuindicator.png
  • default.css
  • default.png


Create a new Green Skin

Copy the default directory and its contents, and rename the .css and .png files to the new Skin name (e.g. green.css, green.png).

  • img/
    • menubaritem_submenuindicator.png
    • menuitem_submenuindicator.png
  • green.css
  • green.png


Image files

The .png files in the /img folder, are small white menu triangles and can typically be left as they are. However the green.png file is a 80x80 image that represents your skin selection.

Replace the green.png file with one that is green in colour.


CSS file

Now we can edit the green.css file. You could go through this file and change all the color values. The default.css file is made up of grayscale colours, some of which could be left as they are (i.e. black goes with everything!). Using your favourite text editor perform a 'find and replace' on the following values:

  • 111111 -> 113524
  • dddddd -> 89c6a8
  • 444444 -> 42554b
  • 4e4e4e -> 2d4238
  • f7f7f7 -> d2f4e3
  • c4c4c4 -> 8fc4aa
  • c9c9c9 -> 95cbb1
  • eaeaea -> c1e8d4
  • 515255 -> 42554b

I've created a collection of green colours here that are a similar brightness to the original grayscale values. It's worth remembering that when you make changes to .CSS files, you will typically need to flush the cache on the web server.


Force default branding

This article outlined the changes needed to create a new green skin, but these settings could be applied to the default skin, and you could disable the Skins feature, if you wanted to force your branded colours.

NOTE: By default the Skins feature is enabled and this allows your users to change their own colour schemes. If you disable this feature your users might keep their most recent Skin selection. To reset all users' Skin selections to the default you can run the following SQL on the database:

UPDATE `users` SET `skin` = NULL WHERE 1


Thanks for visiting,