Wikilime stores are built around CSS and XHTML templates. Anyone who creates a Wikilime store has full editing access to these files. Basically this means is that you can completely redesign and shape your online store.
I’m going to quickly show you the best way to style your store. Firstly we are going to take a look at the CSS code.
Editing your stores CSS code.
There are many CSS editors available for the PC and Mac. Here at Wikilime we mainly use Dreamweaver for building sites from scratch, but if you don’t have a copy of Dreamweaver fear not! There is a better way to build your store.
Firstly make sure you have a copy of the Firefox web browser installed, no designer should be without it! Once you have this you need to download the Firebug plugin from here. When you have this installed you are all set to go!
Log into your stores control panel and open up the ‘Design’ tab. In here you will see a button labelled ‘CSS’ click this to open up the CSS editor.
Next we need to open up a new browser window (in Firefox). Open a new window and navigate to the main address of your store. You should be faced with something similar to the below image.
On the status bar of your Firefox browser you should see the following icon.
Click this and the Firebug window will open just below your Wikilime store. Using this window means you can edit the CSS for your store directly.
If you click on the ‘CSS tab’ and then the link labeled ‘theme.css’ this will open up the CSS template that your store runs from. Next if you click on the ‘edit tab’ you will be able to edit the code. As you change the values in here your store will update allowing you to quickly see the updates.
The changes you make in Firebug will not be saved. In order to save your changes you simply need to copy the amended code from the Firebug window and paste it into the CSS window within your control panel.
Click the ’save ‘ button and the changes are now live! Our next tutorial will show you how to identify the different elements that make up your Wikilime shopping cart.
