BANS - Build a Niche Store - Customising your Theme

There are already many hubs about BANS (Build Niche Store!) so I won't go into a great deal of detail on how they work. What I will try to outline are some tips for customising your BANS store once it is set up.

The BANS Idea

BANS is software to easily set up a web site that is a showcase for items on ebay. The general idea is that you find a niche and aim to be high enough in Google and other search engines that you can drive targeted traffic to your site. A niche is a specific, narrow category that has enough articles for sale, and interested buyers but a small number of competing web sites for the keywords that describe your niche. There are many keyword tools available to find keywords that are being searched for but have low competition. I've collected a few links below. It's no good aiming for a keyword that is searched often but has 5,000,000 competing web sites!

Customising Your BANS Site

It's very easy to set up a site but it will look very bland without customising. There are quite a few templates included in the software package but all are variations on shades of white! Thi 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. I couldn't find any free templates on Googling although there are a few templates for sale. I may try to put a few either free or very low cost together in the near future.

Hints and Tips for Customising

The file you need to edit is called styles.css and is in the themes folder. There are a few different themes. I chose to use the one called 'layout-3-both' which is fairly wide with a 'sidebar left - main content- sidebar right' pattern.

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!). The font-size, colour and font-weight can be changed. For instance, 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!

Don't be afraid to have fun and experiment. You can always undo your mistakes!

I've collected some resources to help below including some general CSS tutorials.

Don't forget to test your design in different browsers as you go along (Browesershots is good for this!). I use firefox and always seem to have problems making my designs look the same in Internet Explorer! There are lots of addons for firefox to help in your web designing. I've included a link to some of my favorite resources below.

If you run into any prblems I'm always willing to help. Just leave a comment!