Colors

A template can include multiple colors. In this chapter we explain how to edit or add a new color to a template.

Inside the template folder there is a colors folder, and within it you will find one folder for each color. For example, for the Respy-Wide template, the colors folder is:

templates/Respy-Wide/colors/

Each color consists of at least two files: the CSS that defines the style, color.css, and the image shown in the back office to represent the color, color.png. The color.png image must be 15x15 pixels. In addition, there may also be images used as backgrounds.

The color.css file

This file is a simple stylesheet that contains only the declarations related to the color. Inside you may find rules such as:

#header { border-color: #EDEDED; }

where #EDEDED is the HTML color code. You may also find rules like this:

#page { background-image: img('page-bg.gif'); }

where the page-bg.gif file is a background. In that case, simply overwrite the file in the color folder with another file using the new colors. If the extension of the new file is different, remember to update the extension in color.css as well.

After that, upload the files to the server, check the preview ( Website > Design > Preview ) to see whether the changes satisfy you, and then apply the template to the site ( Website > Design > Apply to site ) to make them final.