Customise-theme
From E-commerce knowledge - Shopfitter
[edit] Customise a Theme
Ask Shopfitter to do it
The easy way to have a custom design for your website is to commission Shopfitter to build one for you - these start from around £200 plus VAT or US$400.
Contact us on our help desk to enquire.
Customise a theme yourself
To customise a theme requires some knowledge of CSS (cascading stylesheets) and a little HTML so you can see where the changes to the stylesheet will take effect.
- The first step is to use Windows Explorer to open C:\Program Files\ShopFitter\ShopFitter 4\themes and copy and paste one of the existing themes - choose one that is most similar to what you want.
- Rename the theme folder and then open the images folder to alter the screenshot.jpg file. This will help you find your new theme to test it in Shopfitter.
- Next, launch Shopfitter and your shop, then select the theme you've created.
You'll now be able to publish and view any changes you make.
To change text sizes, colours, borders, background images and some positioning you need to edit the sitestyle.css file. This can be done with an html editor or even in Notepad.
The principle is fairly straightforward. Here are some examples:
- Change font style:
from:
font-family:Arial, Helvetica, sans-serif;
to:
font-family:Times;
- Increase font size:
from:
font-size:12px;
to:
font-size:14px;
- Make the font bold
font-weight:bold;
- Change colours:
This is a little more complex because of the need to use hexadecimal codes; these are six characters that represent colours in html. The first two specify red, third and fourth specify green and last two are for blue. For exammple, black has no red, green or blue so is represented as #000000. Whereas while it the full value of all three so is coded as #FFFFFF.
To help with choosing colours and finding hex codes (as they are commonly known) here is a table with corresponding codes on the main Shopfitter site: hexadecimal codes
And also visit the Shopfitter main site for a colour scheme tool
All links will be are known as 'a href' and to change the styles for them alter the valuse as above to styleshhet entries that are preceded by a: For example:
a:link{ color: #003366; font-weight:bold; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; }
a:visited { color: #003366; font-weight:bold; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; }
a:hover { color: #9F0110; font-weight:bold; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: underline; }
a:active { color: #003366; font-weight:bold; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; }
Note that 'text-decoration: none;' removes the underline from a link; in the above example it appears when the mouse is rolled over the link, the control is specified in the a:hover statement.
