Changing the template colours

One of the nice features of the Pixel Linear theme is the fact you can customize your colours from the theme settings control panel which gives you almost an unlimited array of colour combinations for your website or blog. Below is an outline in red Changeable areas for the Pixel Linear theme:

colour-layout-area

Changing Your Colours

Changing your colours is even easier now than the Corporate 3 theme because now I’ve incorporated a built-in colour picker:

pl-colour

Each area of the theme noted with the red “Changeable” areas will be represented by a description and colour value field next to it (see the screenshot above). Each field will have a default value in it and if you change your mind, I’ve noted the default colour to use.

To change your colours, you click in the field and the colour picker window pops up with a cross that you can move around the window to choose your colour. As you do this, you will see the colour value will change in the field so when you are happy with your choice, click outside the popup window and then click SAVE on your Settings. If all went well, you should see your new colour on the front-end of your web site. Repeat for each area that you want to modify.

NOTE: If you already know the colour value you want, add the HEX value to the field and the colour will automatically show.

Additional Colour Changes not part of the Default Setup

On the changeable map of the areas dipicting where you can change colours, there may be some other things not part of the template settings that you want to change. I recommend if you do this that you keep a BACKUP of your template before you start making core changes to the template files.

IF you are proficient enough, you should be able to change colours from within the template.css file which is where any styles can be modified. You would be looking for things relating to “color” within the css code for the following:

  • color
  • background
  • border
  • :link
  • :hover
  • :active

Revert Back to the Original Colours

You may notice in the template settings that mousing over each colour setting, you will see a popup info window which displays the original colour so that if you decide to go back to the default settings, you know what colour it was. In the example below, you see the Page Background default colour is black, represented by the HEX value of 000000 (#000000).

pl-defaultcolour

By | 2010-09-25T04:00:44+00:00 September 25th, 2010|Blog|0 Comments

About the Author:

Leave a Reply