Build a Niche Store Theme Customisation

As there are already many lenses BANS (Build a Niche Store) I don't propose to go into detail about the way they work but I do want to give some tips and explain something about customising the (very bland!) templates supplied.

Customising Your BANS Site

There are quite a few templates included in the software package but all are variations on shades of white! This is I think deliberate to allows them to be customised to suit your product and style. However you'll need to know some CSS to be able to make a professional looking site. There are templates on the web (some free, most costing) but you'll still have the same template as everyone else. Much better to make your own unique template. Although it is a lot of work initially you can then use the same template, with minor changes to the colour for instance, for all your niche stores.

Hints and Tips for Customising

Go to your themes folder and choose one of the layouts supplied. I chose to use the one called 'layout-3-both' which is fairly wide with a 'sidebar left - main content- sidebar right' pattern.In the theme folder that you choose you'll find a file called styles.css. Open up this file in a text editor.

Changing the Colours

To change the colours you need to edit anywhere you see something like #ffffff.This is a hex colour. For instance #ffffff is the code for white and #000000 is the code for black. You can see all the hex colour codes at the link below.

To change the background colour edit the lines:

body#background {background:url('images/bg.jpg')repeat !important;

background-color: #b4bc63;}

You will also notice that you can add an image to the background if you'd like a pattern rather than plain colour. Label your image bg.jpg and upload to the themes/layout-3-both/images folder (or appropriate folder for your chosen theme). Background images can be found at the link below.

Headings

Headings are designated by H1, H2, H3 etc (going from larger to smaller!). You can change the font-size, colour and font-weight. look for the lines below. H1 is a main heading.

#content h1 {font-size: 1.6em;

font-family: Arial, Helvetica, Sans-Serif;

font-weight: bold;

color: #151707;}

Links

Links are designated with an 'a'

For instance the lines below code for the links in the main content

.narrowcolumn a{color: #373D12;font-weight:bold;

text-decoration:none; }

and

.narrowcolumn a:hover {font-weight:bold;

color: #373D12;

text-decoration:underline; }

The above lines will underline the link on hovering.

Font-weight can be bold or normal, or a numerical value. Change the color, weight or size and observe the effect!

Have fun. remember to save your file so that you can easily undo any mistakes!