Customizing Color Palette

Problem

How can I customize online store color palette?

Solution

Online store color palette is defined by the Color Palette option at the Online Store > Design screen in control panel. The value of this option is a folder name stored in the ~bm/templatestore/webroot/static/store-skins/ folder. Billing is shipped with several predefined color palettes: parallels, default, new_general, light, etc. These palettes are stored in the same-name folders. You can create your own folder and redefine the online store color palette there.

Color palette consists of CSS files (general.css, custom.css, combo.css, etc.), and images. The general.css file defines storefront styles.

You can create different color palettes for your online store and online stores of your resellers.

To configure a color palette for online store:

1. Select respective online store for editing. For details, refer to the Selecting Online Store for Editing section earlier in this guide.

2. Log in to the server where the online store is installed. Open the ~bm/templatestore/webroot/static/store-skins/ folder. The folder contains the folders that correspond to color palettes (default, new_general, etc.).

   Note: The ~bm folder is /usr/local/bm.

3. Create a new folder for your color palette (further in this section will be referred as <custom-name>). Creating a new folder for your palette prevents overwriting it, in case of upgrades.
4. Create css and images folders in your ~bm/templatestore/webroot/static/store-skins/<custom-name> folder.
5. Copy the ~bm/templatestore/webroot/static/store-skins/general/css/combo.css file to the ~bm/templatestore/webroot/static/store-skins/<custom-name>/css/ folder. There is no need to make any changes to this file.
6. Copy general.css file from some default color palette to ~bm/templatestore/webroot/static/store-skins/<custom-name>/css/ folder or create new one.
7. Redefine storefront styles in the general.css file.
8. Default Billing images are stored in the ~bm/templatestore/webroot/static/design/images folder. If you used other images in the general.css file, put them in to the ~bm/templatestore/webroot/static/store-skins/<custom-name>/images folder.
9. In the Control Panel, open Online Store > Design, set the Color Palette selector to Custom, and type in your <custom-name> folder.
10. Synchronize online store to apply new settings. For details, refer to the Synchronization Settings section earlier in this guide.

11. To check whether new color palette is correctly applied, open <your domain name>/http/getcss.php URL. The page with text like the following is displayed:

    @import url("/design/css/general.css"); – included standard CSS file describing online store style general parameters.

    @import url("/color_palette/custom-<name>/css/combo.css"); – included stylesheet for storefront drop-down widget.

    @import url("/color_palette/custom-<name>/css/general.css"); – included stylesheet describing color palette.

    @import url(/conf/1/css/general.css); – included custom CSS file edited at Online Store > Design, the Customized CSS field.

    The second and third records describe current color palette.