For all Joomla 3+ templates built using the Zen Grid Framework v4 (any theme after October 2014) please refer to the Zen Grid Framework v4 documentation.
The Zen Grid Framework version 2+ provides the ability to add custom css styling to your template from the template admin.
In order to use this feature please ensure that the Add custom css? option is enabled and that you have entered the correct information into the settings provided.
There are 6 custom styles available as well as a general extra css rule that can hold any amount of css that you want to add to your template.
The format for each style includes the following:
1. Selector.
This is the css selector that you would like to target. eg adding a in this area will target all links on the page. You can add multiple selectors in this area by simply separating them with a comma. eg a, p, strong
2. Rule
The rule determines the attribute of the selector that you would like to target. There are three choices here:
a. color
b. border-color
c. background-color
3. Color
The color option determines the colour you would like to assign to the selector as specified in the preceding settings.
a. Entering the value directly
It is possible to enter your desired color as a 3 or 6 digit number or the appropriate web safe color specification. eg entering 000, 000000 or black here will make the value the color black.
Please note that the value here needs to be represented without the #.
b. Using the color wheel
It is also possible to specify the color used for the custom style by using the color selector. To do this click on the square icon that sits to the right of the color text input. This will generate the color popup as shown below.
To finds your desired color you can use your mouse to scroll around the large square color panel or adjust the vertical slider until the square displays your desired color. Once you have found the color you want to use you need to click on the rainbow disc on the bottom right of the panel. This will populate the textbox with the hex value for the color as well as color the square icon.
The framework also has the ability to add more diverse css rules into the template via the extra css text area at the bottom of the custom style panel. This text area will render any css that is written into the text area on the front end of your site. The code is output in the head of the template and takes precedence over any other css that may be specified in the css files.
You can see an example of this in the screenshot below.
