Colors
A template can be made up of multiple colors. In this chapter we see how to edit or add a new color to a template.
In the template folder there is a colors folder; inside you will find a 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 that will be shown in the admin 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 declarations related to the color. Inside you may find declarations like:
#header { border-color: #EDEDED; }where #EDEDED is the HTML color code. You may also find declarations like the following:
#page { background-image: img('page-bg.gif'); }where the page-bg.gif file is a background. In this case just replace the file you find in the color folder with another file using the new colors. If the new file has a different extension, remember to update the extension in the color.css file as well.
Then save the files on the server, check via the preview (in Website > Design > View preview) if the changes satisfy you, and then apply the template to the site (in Website > Design > Apply to site) to make them definitive.