BV Commerce 6 Theme Kit Download
BV Commerce 6 Theme Kit Source Code
This theme kit will help you create custom themes for your store. It includes standard HTML versions of the common store pages which you can use to preview your CSS and images using any standard web design tool like Dreamweaver, Expression Web or Text Mate.
Getting Started
Download the theme kit to your computer where you will be doing design work. Unzip all of the files. You will see “PhotoShopFiles” and “www” folders. The “PhotoShopFiles” folder contains PSD files which you can use to create new buttons and graphics from the existing templates. This will save you time if you use PhotoShop. Many other design/paint programs can also read PSD formatted files.
The “www” folder contains a mock-up of a store using a common theme. There are several sub folder that you should become familiar with to create a custom theme.
- “assets” – This folder contains any custom images referenced by your design. When your CSS file uses the {{assets}} prefix on any URL the theme kit will look in this folder for the image.
- “buttons” – This folder contains any custom button images for your theme. You should create custom buttons to replace every standard one.
- “css” – This folder contains the Theme.css file which is the main place you’ll be working to create a custom theme. Other .css files in this folder are standard to the software and are for reference only. Do not edit them as any changes you make will NOT be included in custom themes you upload to the store. Instead, override their CSS settings if you need to in Theme.css
The other folders and files are simple there to create a local copy of your store for design testing. There is no need to edit any of them.
How to work with the Theme Kit
Standard practice would be to double click on the Home.html file which will open in your web browser. You can click through most of the links in the theme kit to move between sample pages.
You should then open your design tool and load up the entire “www” folder as a web site. This will let you easily view all of the files and change the Theme.css to create a new design.
Preview your changes in your web browser locally as needed.
Special CSS Tricks for Theme Kit
The theme kit duplicates some special CSS tricks of your store. The {{assets}} tag should be used as the first part of any URL in your style sheet. For example, if you include a custom image called “HomeAd2.png” in your design you should reference it in the style sheet as:
url(‘{{assets}}HomeAd2.png’);
And you should then place it in the /www/assets folder of your theme kit locally to see the results. The ThemeHelper.js file automatically replaces {{assets}} with the correct link and this will let you upload your CSS file to the live store without any changes.
Uploading to a Store When You’re Done
When you’re ready to upload to your store go to the admin side and click on the “Options->Themes” menu item. Hover your mouse over any installed theme and select “Duplicate Theme” which will create a new copy of that theme. Click the “Edit” button on your “Copy of xxxx” theme where “xxxx” is the name of the theme you duplicated.
Next, change the name, description and other basic theme information for your new design and save.
Then, click on “Style Sheet (CSS)” and copy and paste your entire local Theme.css file into the text box and save.
Third, under Images: Buttons upload all of the files in your local /www/buttons folder to the store.
Fourth, under Images: Assets upload all of the files in your local /www/assets folder to the store.
Lastly, choose “Back to Themes” and then click on “Select This Theme” when you’re ready to activate it on your live store.