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 Showcase 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
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
The background of the center portion of the outer
header.
Outer header 1
The background of the area directly below
the outer header. The background set here can be partially overridden for the
center portion of the area by the Header 1 setting below.
Header 1
The background of the center portion of the
area directly below the 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.
Content
The background of the center portion of the main
content area.
Outer footer
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
The background of the center portion of the top
footer.
Outer footer 1
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 1
The background of the center portion of the
second footer.
Typography
Appearance of text formatted using text styles.
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 supercede the Text setting
above for text links.
Link on hover
Appearance of the text links when a mouse
pointer hovers over them.
Link alternative
Appearance of linked text using the
Alternative text style.
Title
Appearance of headings formatted using the
Title style.
Subtitle
Appearance of headings formatted using the
Subtitle style.
Heading 1
Appearance of headings formatted using the Heading 1 style.
Heading 1 Alternative
Appearance of headings formatted
using the Heading 1 Alternative style.
Heading 2
Appearance of headings formatted using the
Heading 2 style.
Heading 2 Alternative
Appearance of headings formatted
using the Heading 2 Alternative style.
Heading 3
Appearance of headings formatted using the
Heading 3 style.
Heading 4
Appearance of headings formatted using the
Heading 4 style.
Caption
Appearance of text formatted using the
Caption style.
Caption alternative
Appearance of text formatted using
the Caption alternative style.
Smaller
Appearance of text formatted using the
Smaller style.
Alternative text
Appearance of text formatted using the
Alternative text style.
Event calendar title
Appearance of the
Upcoming events and Past events headings on
event calendars.
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.
Gadget styles
For each of the available gadget styles for this theme, you can customize the following elements:
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.
Link
Appearance of links within gadgets.
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.
Table
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
Appearance of the author label.
Date and time
Appearance of the date and time labels.
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
Appearance of the forum category.
Column headings
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
Appearance of the author label.
Date and time
Appearance of the date and time labels.
Date and time on hover
Appearance of the date and time
labels when a mouse pointer hovers over them.
Icons
The 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.
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 text and background of the
login button.
Button on hover
Appearance of the text and background of
the login button when you hover over it.
Button on active
Appearance of the text and background
of the login button when you click it.
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.
Active
The appearance of the link button when you click
it.
Donation goal
For each donation goal gadget style, you can customize the following elements:
Donation bar
Fill 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 ground
Outline 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 labels
Appearance of the
Goal and Collected labels within donation
goal gadgets.
Donation goal
Appearance of the
Goal value within donation goal gadgets.
Donation collected
Appearance of the
Collected value within donation goal gadgets.
Donation description
Appearance of the description
assigned to the donation goal gadget.
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 you hover over it.
Donation button active
Font and background color of the
Donate button when you click it.
Social profile
For each social profile gadget style, you can customize the following settings:
Background color
The background color of the gadget. You
can select a color from the drop-down palette or enter the hexadecimal code
for the color (e.g. #FF0000 for red).
Font family
The typeface used to display the text. This
setting only appears for gadget styles that display text rather than icons for
social networks.
Font color
The color of 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.
Breadcrumbs
These are the elements that appear within the breadcrumbs gadget.
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.
Site map
For each sitemap gadget style, you can customize the following elements:
General
The font and font style used to display menu
items.
Link
The color of the menu items.
Navigation links
Appearance of text links within navigation links gadgets.
Link
Font color of text links within navigation links.
Link on hover
Font color of navigation links when you
hover over them.
Horizontal menu
For each horizontal menu gadget style, you can customize some of the following menu elements.
Normal
Font family and background color of menu items.
Hover
Font family and background color of menu items
when you hover over them.
Selected
Font family and background color of menu items
when you click them.
Mobile menu
Font color and background color of the menu
on mobile devices.
Vertical menu
For each vertical menu gadget style, you can customize some of the following menu elements.
Normal
Font family and background color of menu items.
Hover
Font family and background color of menu items
when you hover over them.
Selected
Font family and background color of menu items
when you click them.
Secondary menu
For each secondary menu gadget style, you can customize the following elements:
General
Font family and background color of menu items.
Hover
Font family and background color of menu items
when you hover over them.
WA branding
Controls the appearance of the Powered by Wild Apricot area at the bottom of your site pages.
Backgrounds
The background color or background image for
the inner and outer sections of the Powered by Wild Apricot area.
Text
The appearance of the text within the Powered by
Wild Apricot area.
Link
The appearance of the link within the Powered by
Wild Apricot area.
