BV Commerce 6 includes a new theme system that offers lots of new options to designers. Developers should be aware of the new theme structure and how things work.
System Themes and User Themes
One of the issues that arose with previous versions of BV Commerce was that designers had a tendency to edit the built-in themes directly rather than make copies of them. This meant that when a service pack was released it had the potential to overwrite a modified built-in theme without the designer knowing.
To resolve this BV Commerce 6 has a selection of “System Themes” which are built-into the software and then are installed to a store as needed. This allows designers to create their own modified themes with a single click from Options->Themes in the admin side. It also has the benefit of allowing designers to create copies of their own themes for backup and versioning purposes.
The system themes are located in the /Content/Themes folder where each folder represents an individual theme available for install. As a developer any new theme you place in this folder becomes available for install in stores.
When themes are installed they are copied to the /images/sites/{0}/themes folder where {0} represents the ID number of the store. For toolkit installs of BV Commerce there will only be a single store ID. Themes are copied with their exact name so that the system knows which themes have been installed already and which ones are available for new install. If you made a copy of the “Simple Blue” theme you’re actually creating a new one. Deleting your copy of the original Simple Blue theme would make it once again available for install. So, if a new version of a system theme is made available in a service pack you can duplicate your current version for backup and then install the new one.
Theme Parts
BV Commerce 6 Themes are made up of a collection of files in a folder. Every theme in BV 6 uses the same Site.Master file from the root of the web site.
Bvtheme.xml – This is the theme definition file that contains information like the theme ID, name and designer’s web site. You can edit this by hand or duplicate an existing theme and use the built-in theme editor pages in the admin to modify the file.
ColumnData.xml – Another new feature of BV Commerce 6 themes is the ability to save and install content columns to/from a store. This gives designers the flexibility to customize the site when a theme is installed. This file is the XML serialized version of the content columns and blocks. Don’t worry, you can also use the theme editor pages in the admin side to copy blocks into this file. No need to hand edit.
Preview.png and Preview_big.png – These are preview images that show store users what your theme normally looks like when installed.
Header.htm and Footer.htm – These files contain any custom HTML header and footer for the theme. These files contain standard HTML but also have optional tokens that are replaced at runtime. For instances the text {{copyright}} would be replaced by a copyright symbol and the current year.
Styles.css – This is the CSS file for the store. It is processed and minified before being returned to the browser. This allows you to use site-relative URLs in the style sheet like “~/images/sample.png” for a background image. The “~” character is replaced with the site relative root just like ASP.NET pages do.
/Assets – This folder inside the theme contains any images the theme may need to install in the store’s assets. For example, if you need to install a background image you would place it in this folder and when the theme is installed the file would automatically be copied to the stores Assets.
/Buttons – This folder contains button images to replace the standard button images. It is highly recommended that you create a complete set of button images. Image names must match exactly although PNG, JPG and GIF formats are accepted (in that order).
Theme Options on the Admin Web Site
The admin web site contains a new set of theme options under Options->Themes. The first page is the control panel showing a list of available themes on the right and installed themes on the left. Hovering over a theme on the right shows an “Install” button which you can use to copy a system theme to the current store. Hovering over an installed theme shows options to “Select”, “Duplicate”, “Edit” or “Delete” a theme. The currently selected theme displays in a different color background and will not have a “Select” button available.
The “Duplicate” button creates a copy of any theme. “Delete” removes a theme from the store but does not destroy system themes, which are always available. “Edit” takes you to the edit theme area.
http://help.bvcommerce.com contains several tutorials showing how to create and edit themes from the admin control panel. As a developer, just be aware that under the hood these pages are editing the files described above in the appropriate theme folder.