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
- defaultValues.txt
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.
Customizing options
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:
Global_settings-Background_color = #FFFFFF; Global_settings-Text-Font_family = Verdana, Arial, Helvetica, sans-serif; Global_settings-Text-Font_size = 0.80em; Global_settings-Text-Font_weight = normal; Global_settings-H1-Background_color = ;
Each entry in this file must use the following format (with items in square brackets being optional):
MenuName[-SubMenuName][-SubSubMenuName]-SelectorType = [DefaultValue];
Looking at the second last line in the sample code above...
Global_settings-Text-Font_weight = normal;
...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:
___45___
...where 45 is the ASCII code of the symbol in decimal format. For a list of ASCII codes for different symbols, click here.
Selector types
Wild Apricot supports the following selector types:
Background_image
a reference to an image
Background_position
top, bottom, left, right
Background_repeat
repeat, repeat-x, repeat-y, no-repeat
Background_color
Color
Font_color
Outline_color
Item_Color
Border_color
Colors in #rrggbb format
Font
Font_family
Typeface name
Size
Font_size
Size in ems
Weight
Font_weight
Bold, bolder, normal
Style
Font_style
Italic, normal
Decoration
Font_decoration
Text_decoration
Underline, none
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:
BODY { background-color: {Global_settings-Background_color}; }
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.