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.
Quick customization panel
To make website customization faster and easier, the most commonly customized settings appear in a quick customization panel.
From the quick customization panel, you can change site backgrounds, colors for selected text elements, and styles for selected gadgets.
To return to the full colors and styles settings, click the All settings option.
For more information on the quick customization panel, click here.
Saving and undoing changes
To save the changes from your current editing session, click the Save button. To discard the changes from your current editing session, click Cancel.
To return your site to the original colors and styles settings for your website theme, click Reset all to default button at the bottom of the screen.
To undo your most recent change within the current editing session, click the Undo icon.
You can undo a change even after saving or canceling the changes to your current editing session. You can even undo the Save, Cancel, and Reset all to default functions themselves. After undoing a change, you can use the Undo icon to undo the previous change.
To redo a change after undoing it, click the Redo icon to the right of the Undo icon.
You cannot undo or redo changes after leaving the current editing session.
Shared settings
The following settings can be defined for some or all elements.
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 add a color to your custom palette, click the color within the mixing window then click the plus sign.
To remove a color from your custom palette, hold down the Ctrl key then click the color within your custom palette.
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:
- 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.
