GavernWP has an extensive mechanism allowing to create additional theme styles. We may distinguish two main groups of styles in this mechanism:

• style family
• styles included in style family given

The whole configuration is included in styles.json file:

[{
"family": "color",
"family_desc": "Theme color",
"family_tooltip": "You can select one of the theme colors",
"styles": [
{
"name": "Color I",
"value": "color1",
"file": "style1.css"
},
{
"name": "Color II",
"value": "color2",
"file": "style2.css"
}
]
}]

As you can see, it includes color style family which has two styles, namely: Color I and Color II.

In order to create new style family or a style for style family given, it is enough to create a next object in styles.json file and then create CSS files connected with a family given – in the case of color family, these are style1.css and style2.css files.

GavernWP will load CSS files of a style given in a head section – chosen in an administration panel or, if there is a tool for choosing user’s styles switched on, they will be loaded based on a Cookie file storing data about a style used by a user.

You have to remember that for each style family there is at least one CSS file loaded. Therefore, creating coexisting style families like:

• dark styles and light styles
• blue styles and green styles

is incorrect because at least one CSS style from each family will be loaded immediately. So the correct one is creating style families responsible for some elements of website styling, e.g. a separate family responsible for website coloring (colors) and a separate one for website background (patterns).

Generally, you have to care about particular style families in order not to overwrite one another.