Color and style settings for Kaleidoscope 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 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 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.

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 Kaleidoscope themes.

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

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

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 setting below.

Header 1
The background of the center portion of the top outer header.

Outer header 2
The background of the area directly below 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 Header 1.

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 1
The background of the top footer. The background set here can be partially overridden for the center portion of the top footer by the Footer setting below.

Footer 1
The 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 1 setting below.

Footer 2
The background of the center portion of the second footer.

Outer branding
The background of the outer portion of the area where the Powered by Wild Apricot Membership Software statement appears

Branding
The background of the center portion of the area where the Powered by Wild Apricot Membership Software statement appears.

Typography

Controls the appearance of text formatted using text styles. You can set these elements differently for the gadget styles available for content gadgets: basic, for light backgrounds, and for dark backgrounds.

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.

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

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

Promo
Appearance of text formatted using the Promo text style.

Page title
Appearance 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 5
Appearance of headings formatted using the H5 style.

Smaller
Appearance of text formatted using the Smaller style.

Caption
Appearance of text formatted using the Caption style.

Caption alternative
Appearance of text formatted using the Caption alternative style.

Quoted
Appearance of text formatted using the Quoted style.

Date and time
Appearance of the date and time labels within forum update gadgets and recent blog posts gadgets.

Author
Appearance of the author label within forum update gadgets and recent blog posts gadgets.

Location
Appearance of the location label within upcoming events gadgets.

Form

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 labels
Appearance 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 instructions
Appearance of form instructions, such as "Select membership level", "Enter your email", "Mandatory fields", etc.

Divider
The color of the horizontal divider that separates the form instructions from the form fields.

Button styles

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

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.

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.

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

Author
The appearance of the author label.

Date and time
The appearance of the date and time labels.

Links
The color of the Read more, Add comment, Edit, and Delete links.

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

Forum category
Controls the appearance of the forum category.

Column headings
Controls 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.

Icons
The color of the icons within discussion forum and forum summary gadgets in mobile view.

Event calendar

Title
Appearance of the Upcoming events and Past events headings on event calendars.

Donation goal

For each donation gadget style, you can customize the following elements:

Donation labels
Appearance of the Goal and Collected labels.

Donation values
Appearance of the Goal and Collected values.

Donation bar
Fill color of the collected portion of the donation progress bar. You can select a color from the drop-down palette or enter the hexadecimal code for the color.

Donation bar background
Fill color of the uncollected portion of the donation progress bar. You can select a color from the drop-down palette or enter the hexadecimal code for the color.

Donation bar border color
Outline color of the donation progress bar. You can select a color from the drop-down palette or enter the hexadecimal code for the color.

Donation bar percentage
Appearance of the donation percentage within the donation progress bar.

Donation button
Font and background color of the Donate button within donation goal gadgets.

Donation button hover
Font and background color of the Donate button when a mouse pointer hovers over it.

Featured member

For featured member gadgets, you can control the appearance of the following elements. You can set these elements differently for the gadget styles available for featured member gadgets: basic, for light backgrounds, and for dark backgrounds.

Member label
The appearance of the label of the field used to identify the member.

Member label on hover
The appearance of the label of the field used to identify the member when a mouse pointer hovers over it.

Label 2
The appearance of the label for the second field displayed for each member.

Label 3
The appearance of the label for the third field displayed for each member.

Link to member directory
The appearance of the View member directory link.

Link to member directory on hover
The appearance of the View member directory link when a mouse pointer hovers over it.

Log in gadgets

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

Text
Appearance 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.

Button
Appearance of the login button.

Horizontal menu

For each horizontal menu gadget style, you can customize the following elements for top-level menu items and dropdown menu items.

Top level

For top-level menu items, you can customize the following elements.

Normal
The default appearance of top-level menu items. You can choose the font family, size, color, weight (bold or not), and style (italicized or not), and the background color. 

Hover
The font color and background color of top-level menu items when you hover over them.

Current
The font color, weight, and style, and the background color of the currently selected top-level menu item.

Current on hover
The font color and background color of the currently selected top-level menu item when you hover over it.

Dropdown

For dropdown menu items, you can customize the following elements.

Normal
The default appearance of dropdown menu items. You can choose the font family, size, color, weight (bold or not), and style (italicized or not), and the background color.

Hover
The font color and background color of dropdown menu items when you hover over them.

Current
The font color, weight, and style, and the background color of the currently selected dropdown menu item.

Current on hover
The font color and background color of the currently selected dropdown menu item when you hover over it.