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
• 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.