Customizing colors and styles
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.
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 the Colors and styles menu option within the Website module. To access the Website module from the main admin menu, click the Website menu.
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.
Your Colors and styles settings are specific to the currently selected theme and will not be retained if you switch to another theme.
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.
The following settings can be defined for some or all elements.
The typeface used to display the text.
The size of the text. You can specify the font size in pixels, points, or ems.
Whether the text is bold or not.
Whether the text is italicized or not.
Whether the text is underlined or not.
The color of the text.
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).
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.
Controls whether the background is repeated horizontally or vertically, or both (tiled) or not at all.
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.
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:
- Color and style settings for Blueprint themes
- Color and style settings for Bookshelf and Whiteboard themes
- Color and style settings for Business Casual themes
- Color and style settings for Clean Lines, White Space, Dark Impact themes
- Color and style settings for Fiesta themes
- Color and style settings for Homestead themes
- Color and style settings for Kaleidoscope themes
- Color and style settings for Showcase themes
- Color and style settings for Skyline themes
- Color and style settings for Terra and Firma themes
- Color and style settings for Tinted Tiles and Building Blocks themes
- Color and style settings for Treehouse themes
The settings appearing on the Color and Styles screen, and their order and default values, can be customized for a particular theme using theme overrides. For more information, see Customizing Colors and Styles options for themes.
Identifying the elements to be adjusted
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.
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.