cre loaded navigation bar: change the colour

Cre Loaded’s navigation bar in the cre63_ats template looks like a basic Vista type menu in steely grey.

The dark grey bar isn’t a ‘colour’ set by css – it’s 4 different images put together:

The 4 images that are used

templates/cre63_ats/images/menu_left.png (7 x 43px)
templates/cre63_ats/images/menu_div.png (between each link) (4 x 43px)
templates/cre63_ats/images/menu_mid.png (the main bar) (2 x 43px)
templates/cre63_ats/images/menu_right.png (6 x 43px)

So if you wanted to change the colour of the menu you could do this by creating new images in the colour you want, with a gradient effect thrown-in, and replace the default cre loaded 63_ats ones above.

Here’s a quick rundown on how this could be done:


1. Decide on your colour scheme in advance, including font colours that you may be changing in the css. The file template.css contains most of the css associated with the navigation menu – eg:

table.menubarmain a:link, .menubarmain a:active, .menubarmain a:visited {

A bit of time spent at the colour planning stage will help you to get a result you want, rather than one you may not:

There are 5 colours in the green example above. If you’re new to hex colours, one point to keep in mind is that #000000 is black, #ffffff is white. A really useful piece of software for colour identification is Colorpic from Iconico – and its free.

The colours used in the green example were:
main menu colour: #0b9218; the gradient: #32d641 to #099717; and the dividers: #022505 and #06640f.

Photoshop Instructions

1. Create a 500 x 50px canvas
2. Select Rectangular Marquee tool >> Style: Fixed Size >> 480 x 43px
3. Go to Select >> Modify >> Smooth and apply 5px radius
4. Create a new layer (Ctrl+Shift+N) then Edit>> Fill >> Use: Color and choose the main menu colour.
5. Double click the layer >> Gradient Overlay and using the Gradient Editor Color Stops, set the left the lighter colour, the right darker
6. Still in the Blending menu >> Stroke >> Size 1px >> and change the colour to the darker gradient you used in 5.
7. Create a new layer and create a selection one px under the top border of the nav bar using the Single Row Marquee Tool >> Fill: White
8. Ctrl+click Layer 1 as well >> Select >> Inverse then Ctrl+click Layer 2 and press Del
9. Double click Layer 2 >> Blending Options >> Blend Mode: Soft Light, Opacity 60%
10. To make the dividers, make a new layer >> use the Marquee tool to make a 1px wide divider >> Fill with the darker divider colour
11. Move the Marquee one pixel to the right (use the right cursor key) >> Fill with the lighter divider colour.
12. Repeat 11. and fill with the darker colour again.
13. Slice up (or crop) the image into the 4 parts you need (see earlier description, noting the sizes in pixels.)
14. Backup the original images and upload the new ones to your server, as per the Description of the 4 images above
15. Adjust the font styles, colours etc in templates.css

Here are the 4 images that make up the green example above: