Home

Download this help site
(PDF 80MB)

Download

Customizing Colors and Styles options for themes

This functionality is only intended for experienced web designers

Icon

Please read this page before you proceed: Advanced customization warning
Theme override is intended for people with advanced web design skills. Incorrect use may result in your website malfunctioning.
Note: our technical support team does not provide support related to theme overrides.

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:

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.

Selector types

Wild Apricot supports the following selector types:

Selector

Accepts...

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:

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.

On this page: 

  • No labels
 
Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7