Choose a color style for your GavernWP WordPress theme, or create your own
GavernWP provides extensive support for the creation of additional theme styles. We distinguish between two primary groups of styles in this mechanism:
- style family, and
- styles included in a given style family,
The configuration included in the styles.json file is as follows:
[{
"family": "color" ,
"family_desc": "Template color",
"family_tooltip": "You can select one of the template colors",
"styles": [
{
"name": "Color I",
"value": "color1",
"file": "style1.css"
},
{
"name": "Color II",
"value": "color2",
"file": "style2.css"
}
]
}]
As indicated above, a color style family is included with two styles: Color I and Color II.
To create a new style family or a style for a particular style family, simply create a new object in the styles.json file and then create the necessary CSS files to be associated with a style family – in the case of the color family, the needed CSS files are the style1.css and style2.css files.
GavernWP loads a style’s CSS files through the head section – selected in an administration panel or, if the function for user-selection of template style is switched on, they will be loaded based upon a Cookie file storing data about a style used by a user.
At least one CSS file is loaded for each style family. Therefore, the creation of co-existing style families, such as:
- dark styles and light styles
- blue styles and green styles
is not a valid approach because at least one CSS style from each family will be loaded immediately. So, the correct approach is to create style families responsible for classes of elements related to website styling, e.g. one style family may be responsible for website coloring (colors) and a separate one responsible for website background (patterns).
Generally, take care with template style families that they do not overwrite one another.
This article was first published
