Customise your template's colours to match your brand

Tuesday, 26 November 2013 | Cate

Skill Level: Beginner

Changing the colours on a website to match or compliment your logo will give the appearance of a well thought out, branded design. Have a look at the websites of some of the leading names in retail and ecommerce and you will see how they have used their logo colours within their design to achieve this.

The easiest areas to add your chosen colours are the website background (the area that sites behind the central main content), the header, the navigation bar, the block title bars and the footer, but remember to keep it clean and simple so that you don’t overpower the content with your design.

See our blog post The Basics of Ecommerce Web Design - Part 1 for more detailed information about choosing your colours.

Add a colour or image to the background of your website

On the Site tab in the Template you can set a colour within the Background Colour field
Alternatively you can add an image into the Background Image field – it is advisable to assign a repeating pattern as a background image rather than a large photo image as the file size of the latter can cause the site to slow down. For example, the image below can be assigned as the background image and when the Image Repetition option is set as Draw Tiled this will show on the website as shown.

Add a background colour or image to your header

If you have assigned your logo into the Header Background Image field you will need to remove this and add it to the Header Content field before proceeding with the next steps. Our previous blog post, How to: Insert a logo into your Bluepark website, explains how to do this in more detail.

In the Template go to the Header tab and assign a colour into the Background Colour field
Alternatively you can add an image into the Background Image field

Always remember, however, that your logo and navigation bar will be positioned on top of this area so you need to make sure they stand out against the background you add in. Equally, you need to ensure they don't clash with the background colour or image. If in doubt, it is best to leave it transparent.

Change the colour of your navigation bar

In the Template go to Bars > Navigation
Add in your main colour for the navigation bar in the Background Colour field
Add in a different colour into the Hover Background Colour field so that it shows a different colour when you hover over each navigation link
By default, the Bluepark Glass template has a gradient overlay on the navigation bar to give it the glass effect. This is set within the Background Image field and you will need to delete the file name within this field to show a flat colour.
Set the Link Font Colour and Hover Link Font Colour to make sure the link text stands out against the corresponding background colour
Set the colour of the divider line between each navigation link by editing the Link Divider Colour or remove it entirely by setting Link Divider Size to 0px

Styling your blocks

Each block within the layout has a title bar. This is the area at the top of the block which informs the customer what the block is about. It also visually divides the column up to allow easier navigation of the page. The left, right and centre columns have their own block settings and will need to be adjusted for each. For more information about layouts, columns and blocks please see our Anatomy of a Bluepark Website Infographic.

In the template go to Blocks and then choose from Centre, Left or Right, depending on which column's blocks you wish to edit
In the Title Bar Background Colour field enter your chosen background colour or leave it blank to allow the column colour to show behind
Alternatively add in a Background Image and set its positioning
The Title Bar font colour can be set within the same tab to make sure it stands out against the title bar background
Additionally, you can set a Block Content Background Colour so that it is different from the column underneath, although this can end up making your site look cluttered.
Lastly, you can add a border colour to your blocks, either on the title bar, the content area or both. Add the pixel size of the border, insert your chosen colour and set the style of the border. You can then specify whether the border should be applied to the top, bottom, left and/or right side and whether it should be shown on the title bar, content or both. Alternatively, set the Border Size to 0px to show no border at all.

These settings will allow you to create all sorts of design combinations on your blocks as shown below and, of course, your left, right and centre blocks can all have their own unique style too.

By now, with your logo added and your colours set you should get a real sense of a professional and branded look. But always remember, the main objective of your website is to sell your products, so don't overpower these with your design. Look out for our next post in this series, The Basics of Ecommerce Web Design - Part 2, which will delve deeper into the design process with typography, images and layouts.