Home

Download this help site
(PDF 80MB)

Download

Customizing colors, fonts, styles, and backgrounds

From the Colors and styles screen, you can change the colors and fonts of elements that appear throughout your site. Instead of changing them one at a time, page by page, you can change them all at once. In this way, you can quickly and easily change the appearance of all your menus, links, headings, body text, and forms, among other elements. From here, you can also set the background color or image for your site, or for sections within your site.

Icon

For more advanced fine-tuning and customization you can use CSS customization. Note that any changes you make to colors or styles using CSS will take priority over conflicting changes made on the Colors and styles screen.

Displaying the Colors and styles screen

To define the colors and styles of elements on your Wild Apricot site, click Colors and styles under the Website menu.

 Read more/less

The screen that appears lists the elements you can define along the left, and displays a preview of your changes on the right.

Within the preview, you can click menu items and links to jump from page to page. Your changes won’t be applied to the actual site until you click on Save.

Icon

Your Colors and styles settings are specific to the currently selected theme and will not be applied to other themes.

The elements you can define are grouped into categories. To expand the categories and view the elements within, click the plus sign beside the category name. For each element you can define a number of characteristics. If you select the Automatic option, the setting will be controlled by your website theme.

To return your site to the original settings for the selected website theme, click Reset to default. Any unsaved changes will be lost. To cancel without saving changes, click Cancel.

Shared settings

The following settings can be defined for some or all elements.

 Read more/less

Setting

Description

Font family

The typeface used to display the text.

Font size

The size of the text. You can specify the font size in pixels, points, or ems.

Font weight

Whether the text is bold or not.

Font style

Whether the text is italicized or not.

Text decoration

Whether the text is underlined or not.

Font color

The color of the text.

Background color

The background color of the element. You can select a color from the drop-down palette or enter the hexadecimal code for the color (e.g. #FF0000 for red). To look up the hexadecimal code for a color, go to Name that color.

Background image

An image to be displayed as the background of the element. You can select an image by clicking the ellipsis button ( ... ), or remove an image by clicking the X button. Using the Background repeat setting (below), you can control whether and how the image is repeated. For more information, see Setting the site background.

Background repeat

Controls whether the background is repeated horizontally or vertically, or both (tiled) or not at all.

Border color

The color of the border surrounding the field or box.

Some elements on your site can be controlled by more than one setting. For example, a heading formatted using the H4 style that's also a link can be controlled using either the H4 setting or the Link setting.

General formatting settings apply throughout your website but can be superseded by more localized settings. For example, your General formatting > Link settings can be overridden for login boxes by your Login box > Link settings. 

Theme-specific settings

Different website themes provide different elements for customization and group them into different categories. For a complete description of categories and elements for different themes, click one of the following links:

Identifying which elements control specific gadget components

If you're trying to figure out which element you need to adjust on the Colors and Styles screen to change a particular gadget component, you can use the Inspect option that's available on all modern browsers.

 Read more/less

To use this option, right click over the component you want to change and select the Inspect option.

In the window that appears, the selected component should appear highlighted and surrounded by HTML tags.

In most cases, the tag should correspond to the element you need to adjust on the Colors and Styles screen. In the above example, the Recent blog posts heading is surrounded by <H4> tags. To change the appearance of this element, you adjust the H4 or Heading 4 element under Typography on the Colors and Styles screen.

On this page: 

See also:


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