Home

Download this help site
(PDF 80MB)

Download

Color and style settings for Clean Lines, White Space, Dark Impact themes

From the  Colors and styles screen , you can change the colors and fonts of elements that appear throughout your site. To display the Colors and styles screen, click Colors and styles under the Website menu. 

The Colors and styles screen lists the elements you can change 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. 

Settings for different elements are grouped into categories. The categories vary depending on the website theme you have chosen. 

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. 

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 General formatting > H4 setting or the General formatting > Link setting.

Some elements are general settings than be overridden or superseded by more specific elements. For example, the Site background setting under General formatting > Backgrounds can be overridden at the top of the page by one of the header settings, or in the middle of the page using one of the content settings.

Icon

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.

You can modify the following elements for Clean Lines, White Space, and Dark Impact themes. (For a description of colors and styles settings for specific gadgets, see  Colors and styles settings by gadget.)

General formatting

General formatting settings apply throughout your website but can be superseded by more specific settings. For example, your General formatting > Link settings can be overridden for breadcrumbs by your Login box > Links settings.

Backgrounds

For each of the elements below, you can control the following background attributes.

Attributes

Attribute

Description

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

Background image

An image to be displayed as the background 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.

Background repeat

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

Elements

 

Element

Controls...

Site

The overall background of your site. The background set here can be partially overridden by more localized background settings below.

Outer header 1

The background of the top portion of the header area. The background set here can be partially overridden for the center portion of the header by the Header 1 setting below.

Header 1

The background of the center portion of the outer header.

Outer header 2

The background of the area directly below Outer header 1. The background set here can be partially overridden for the center portion of the area by the  Header 2 setting below.

Header 2

The background of the center portion of the area directly below Outer header 1.

Outer header 3

The background of the area directly below Header 2. The background set here can be partially overridden for the center portion of the area by the Header 3 setting below.

Header 3

The background of the center portion of the area directly below Header 2.

Outer header 4The background of the area directly below Header 3. The background set here can be partially overridden for the center portion of the area by the Header 4 setting below.
Header 4The background of the center portion of the area directly below Header 3.
Outer sidebarThe background of the sidebar to the left of the Content area.
SidebarThe background of the rightmost portion of the sidebar.

Outer content

The background of the main content area of the page. The background set here can be partially overridden for the center portion of the area by the Content setting below, and for the leftmost portion using the Outer sidebar and Sidebar settings above.

Content

The background of the center portion of the main content area.

Outer footer 1The background of the top footer. The background set here can be partially overridden for the center portion of the top footer by the Footer 1 setting below.
Footer 1The background of the center portion of the top footer.

Outer footer 2

The background of the second footer area. The background set here can be partially overridden for the center portion of the top footer by the Footer 2 setting below.

Footer 2

The background of the center portion of the second footer.

Outer footer 3The background of the third footer area. The background set here can be partially overridden for the center portion of the top footer by the Footer 3 setting below.
Footer 3The background of the center portion of the third footer.

Typography

Controls the appearance of text formatted using text styles.

Element

Controls...

Text

Appearance of text formatted using the Normal text style. Most – but not all – body text and text labels throughout your site are formatted using the Normal style. For linked text, the Link setting (below) will override the Text setting.

WideAppearance of text formatted using the Wide text style.
NarrowAppearance of text formatted using the Narrow text style.

Link

Appearance of text links. The Link setting will supercede the Text setting above for text links.

Link on hover

Appearance of the text links when a mouse pointer hovers over them.

Page titleAppearance of text formatted using the Page title text style.

Heading 1

Appearance of headings formatted using the H1 style.

Heading 2

Appearance of headings formatted using the H2 style.

Heading 3

Appearance of headings formatted using the H3 style.

Heading 4

Appearance of headings formatted using the H4 style.

Heading 5Appearance of headings formatted using the H5 style.
Heading 6Appearance of headings formatted using the H6 style.
QuotedAppearance of text formatted using the Quoted text style.
Text highlightedAppearance of text formatted using the Text highlighted style.
Event calendar titleAppearance of the Upcoming events and Past events headings on event calendars.

Form

Element

Controls...

Field labels

Appearance of field labels on forms such as event registration, email subscription, and membership application. If you do not specify settings here, the General formatting >  Text settings (above) will be applied to form labels.

Option labelsAppearance of text labels for radio buttons or check boxes on forms.

Caption

Appearance of headings on member details and member profile screens.

Field instructions

Appearance of field instructions added to form fields.

Form instructionsAppearance of form instructions, such as "Select membership level", "Enter your email", "Mandatory fields", etc.
DividerThe color of the horizontal divider that separates the form instructions from the form fields.

Gadgets

For each of the available gadget styles for this theme, you can customize the following elements:

Element

Controls...

BackgroundThe gadget's background color. You can select a color from the drop-down palette or enter the hexadecimal code for the color.

Title

Appearance of the gadget title. You can select a font family for the title text, and a background color or image for the title bar. You can select a color from the drop-down palette or enter the hexadecimal code for the color. If you specify a background image – by clicking the ellipsis button ( ... ) – you can use the Background repeat setting to control whether and how the image is repeated.

Date and timeAppearance of the date and time labels within forum update gadgets and recent blog posts gadgets.
AuthorAppearance of the author label within forum update gadgets and recent blog posts gadgets.
LocationAppearance of the location label within upcoming events gadgets.
Donation barFill color of the donation progress bar within donation goal gadgets. You can select a color from the drop-down palette or enter the hexadecimal code for the color.
Donation bar groundOutline color of the donation progress bar within donation goal gadgets. You can select a color from the drop-down palette or enter the hexadecimal code for the color.
Donation labelsAppearance of the Goal and Collected labels within donation goal gadgets.
Donation goalAppearance of the Goal value within donation goal gadgets.
Donation collectedAppearance of the Collected value within donation goal gadgets.
Donation descriptionAppearance of the description assigned to the donation goal gadget.
Donation buttonFont and background color of the Donate button within donation goal gadgets.
Donation button hoverFont and background color of the Donate button when a mouse pointer hovers over it.

Table 

Controls the appearance of tables used to display database information in gadgets such as the member directory gadget. These settings do not control the appearance of forum tables, or tables you insert into content pages. 

Element

Controls...

Column headings

Appearance of the column headings at the top of the table.

Table row

Appearance of rows within the table

Table row on hover

Background color of a row when a mouse pointer hovers over it.

Table links

Font color of text links within the table.

Table links on hover

Font color of text links within the table when a mouse pointer hovers over them.

Blog

You can control the following elements for blog and recent blog posts gadgets. Other elements can be controlled using Typography options (above).

Element

Controls...

Author

Appearance of the author label.

Date and time

Appearance of the date and time labels.

LinksColor of links within the blog.
IconsColor of the icons used within blog post gadgets on the mobile version.

Forum

You can control the following elements for discussion forum gadgets, forum update gadgets, and forum summary gadgets. Other elements can be controlled using Typography options (above).

Element

Controls...

Forum categoryControls the appearance of the forum category.
Column headingsControls the appearance of the forum headings.

Table row

Appearance of rows within the table listing the forum topics.

Table row on hover

Background color of a row when a mouse pointer hovers over it.

Table links

Font color of text links.

Table links on hover

Font color of text links when a mouse pointer hovers over them.

Author

Controls the appearance of the author label.

Date and time

Controls the appearance of the date and time labels.

IconsThe color of the icons within discussion forum and forum summary gadgets on the mobile version.

Log in gadgets 

These are the elements that appear within log in form and login in box gadgets. 

Element

Controls...

TextAppearance of the text labels that appear on the form. If you do not specify settings here, the General formatting > Typography > Text settings (above) will be applied to the login box text labels.
 
Examples: the Remember me checkbox label, the name of the logged in member

Input fields

Appearance of the login fields used to enter the username and password.

Labels

Appearance of the labels that appear within or outside the login fields.

Links

Appearance of the text links that accompany the login fields. If you do not specify settings here, the General formatting >  Links settings (above) will be applied to login box links.

Example: the Forgot password link

Links on hover

Appearance of the login links when a mouse pointer hovers over them. If you do not specify settings here, the General formatting > Links on hover settings (above) will be applied to login box links.

ButtonAppearance of the login button.

Button styles

For each of the link button styles, you can customize the following elements:

Element

Controls...

Normal

The appearance of the link button. You can specify text attributes for the button label, and a background color for the button. You can select a color from the drop-down palette or enter the hexadecimal code for the color.

Hover

The appearance of the link button when a mouse pointer hovers over it. You can specify text attributes for the button label, and a background color for the button. You can select a color from the drop-down palette or enter the hexadecimal code for the color.

Functional buttons

For the functional (aka command) buttons appearing on system gadgets and singular gadgets – e.g. Next, Cancel, Register, Confirm – you can customize the following elements:

Element

Controls...

Normal

The background color of the button. You can select a color from the drop-down palette or enter the hexadecimal code for the color.

Hover

The background color of the button when a mouse pointer hovers over it. You can select a color from the drop-down palette or enter the hexadecimal code for the color.

Breadcrumbs

These are the elements that appear within the breadcrumbs gadget.

Element

Controls...

General

Appearance of the breadcrumbs that show your current location within a set of subpages. If you do not specify settings here, the General formatting > Typography> Text settings (above) will be applied to the breadcrumbs.

Link

Color of the links within the breadcrumbs. If you do not specify settings here,  the General formatting > Links settings (above) will be applied to the breadcrumb links.

Link on hover

Color of the breadcrumb links when a mouse pointer hovers over them. If you do not specify settings here, the General formatting > Links on hover settings (above) will be applied to the breadcrumb links.

Current page

Color of the current page within the breadcrumbs.

Controls the appearance of text links within navigation links gadgets.

Element

Controls...

Link

Font color of text links within navigation links.

Menu

For each menu style, you can customize the following menu elements.

Element

Controls...

Main

Font family and background color of top-level menu items. The background color will apply to both desktop and mobile versions, but the font family will apply only to the desktop version.

Drop down

Font family and color of drop-down menu items. The background color will apply to both desktop and mobile versions, but the font family will apply only to the desktop version.

On this page: 

See also:

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