config/style.json
The config/style.json configuration plays a vital role in allowing users of your theme to customise the look and feel of their site. The style.json file settings tap directly into our CSS processor offering property identifiers as variable names.
File format
The file must be a valid JSON format in the following structure:
{
"groups": [
{
"title": "Group title",
"description": "Optional description",
"properties": [
{
"title": "Property title",
"description": "Optional description",
"label": "Optional form element label",
"id": "identifier",
"type": "color",
"value": "#fff"
}
]
}
],
"presets": {
"Light": {
"idenifier": "..."
},
"Dark": {
"identifier": "..."
}
},
"preset": "Dark"
}
So let's go through all this in a bit more detail:
groups
A required Array of Objects. Each object represents a grouping of customisable CSS properties and may contain:
description
Optional String description of the group. This is useful if you think your group requires a helpful hint. |
properties
Required Array of CSS property objects (described below). |
title
Required String property summarising the group of properties that follow. For example "Body Text" or "Headings". |
groups.properties
A required Array of CSS properties represented as an Object. Each object may contain the following properties.
connect
Optional Object supported by the font field type used to connect the Font Selector to font-weight and font-style select boxes. This is an object that supports only two properties connect.weight and connect.style. The values for each property must be the unique identifier for the respective fields. For example:
|
description
Optional String property. Displayed as text between the title and form field within the Theme Customiser. |
id
Required String - the unique identifier for the CSS property. The id is used within your presets (described below), but also as a variable name within your CSS files. The id for your property must be an alpha numeric string with no spaces. |
label
Optional String property. Displayed as a label below description and above the form field for the CSS property. |
options
Object required for select and radio field types. The property names for the options object must be a supported CSS property. The value of each property will be displayed to the user for selection, for example:
|
title
Optional String property. Displayed as a heading above the form field for this property within the Theme Customiser. |
type
Required String representing the type of form element to display to users within the Theme Customiser. Evance accepts the following types:
|
value
Required String default value for the property. This is the global default for this property, but may be overwritten within presets. |
presets
Creating a theme is great, but you know what?! People like a choice. Whilst you may prefer a light airy theme, your users may prefer a darker more moody feel. Zero is a good example of a theme with a Light and a Dark preset. Defining presets is really easy.
Presets are Objects where the property name is the name of your preset i.e. Light or Dark. The name of your preset should ideally be one word. In the following example we have two presets Light or Dark. Presets reference only those identifiers within your previously defined group.properties you wish to make part of your preset. This allows users to switch between presets without affecting other customisations.
{
...
"presets": {
"Light": {
"background_color": "#fff"
},
"Dark": {
"background_color": "#333"
}
}
...
}
preset
Required String property representing the current preset. When you create your theme this should be your favourite version. So for Zero, we chose Light as our preferred preset. This looks like this:
{
...
"preset": "Light"
...
}
Using identifiers as variables within your CSS files
The identifiers from your properties are available within CSS files loaded either automatically or via the <ev:css> tag. So let's take a "background_color" identifier and how we use it in a CSS file. It's simply done by wrapping the identifier name with a $(identifier) e.g.:
{
...
background-color: $(background_color);
...
}
Renders like this:
{
...
background-color: #fff;
...
}