Customizing Colors and Styles options for themes
From the Colors and styles screen, you can change the colors and fonts of elements that appear throughout your site. Using theme overrides, you can customize the options appearing on the Colors and Styles screen for a particular theme.
Once you enable theme overrides and download the theme files, you'll find a PointAndClickSettings folder. Within this folder, there are two key files you can use to customize the colors and styles options:
- cssTemplate.tpl and
The defaultValues.txt file sets the defaults for colors and styles options and determines the order of the options on the Colors and styles screen.
To customize the colors and styles options for a theme, you can add, modify, reorder, or remove entries in the defaultValues.txt file.
In the sample code below, each line corresponds to a separate option:
Each entry in this file must use the following format (with items in square brackets being optional):
Looking at the second last line in the sample code above...
...we see that:
- Global_settings is the menu name
- Text is the submenu name
- Font_weight is the selector type
- normal is the default value
As a result, a Font weight option appears under Global Settings > Text.
Only letters and numbers are allowed in (sub)menu names, and they cannot begin with a number. If you want to use spaces in menu names, use underscore instead. If you want to use special characters line (?!" etc, use the following construction:
...where 45 is the ASCII code of the symbol in decimal format. For a list of ASCII codes for different symbols, click here.
Wild Apricot supports the following selector types:
a reference to an image
top, bottom, left, right
repeat, repeat-x, repeat-y, no-repeat
Colors in #rrggbb format
Size in ems
Bold, bolder, normal
Mapping colors and styles options to CSS styles
The cssTemplate.tpl file maps entries in the defaultvalues.txt file to CSS styles used by your web pages. For example:
When changes are made via Customizing colors and styles, Wild Apricot uses these files to generate the customStyles.css file, which is referenced by PageModel.Styles.