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 General formatting > Link setting can be overridden for breadcrumbs by the Breadcrumbs > Link setting.
You can modify the following elements for Business Casual themes.
Site
Content
Background color of your site.
General formatting
Typography
Text
Appearance of most – but not all – body text and text labels throughout your site. 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.
H1
Appearance of headings formatted using the H1 style. These headings appear in HTML code within <h1> tags and can be applied using the Text style drop-down when editing a content gadget.
H1 Alternative
Appearance of headings formatted using the H1 Alternative style. These headings appear in HTML code within <h1 class="contStyleExcHeadingColored"> tags.
H2
Appearance of headings formatted using the H2 style. These headings appear in HTML code within <h1> tags.
H2 Alternative
Appearance of headings formatted using the H2 Alternative style. These headings appear in HTML code within <h2 class="contStyleExcHeadingColored"> tags.
H3
Appearance of headings formatted using the H3 style. Examples include:
- Section titles on event calendar gadgets
- Select membership level heading on membership application gadgets
- Subscription form heading on subscription form gadgets
- Donations heading on donation gadgets
- Captcha Security check heading
H3 Alternative
Appearance of headings formatted using the H3 Alternative style. These headings appear in HTML code within <h3 class="contStyleExcHeadingColored"> tags.
H4
Appearance of headings formatted using the H4 style. Examples include:
- Gadget titles
- Blog post titles
- Forum headings
- Forum summary headings
- Event names within event calendar
- Registration heading within event details
H4 Alternative
Appearance of headings formatted using the H4 Alternative style. These headings appear in HTML code within <h4 class="contStyleExcHeadingColored"> tags.
Text alt color 1
Appearance of text formatted using the Alt color 1 style. The text will appear in the HTML code within <span class="contStyleExcInlineColored1"> tags.
Text alt color 2
Appearance of text formatted using the Alt color 2 style. The text will appear in the HTML code within <span class="contStyleExcInlineColored2"> tags.
Text alt highlighted
Appearance of text formatted using the Alt highlighted style. The text will appear in the HTML code within <span class="contStyleExcInlineHighlighted"> tags.
Page title
Appearance of text formatted using the Page title style. The text will appear in the HTML code within <span class="pageTitle"> tags.
Quoted
Appearance of text formatted using the Quoted style. The text will appear in the HTML code within <span class="quotedText"> tags.
Form
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 title
Appearance of text labels for radio buttons or check boxes, as well as level names and descriptions on membership application forms.
Caption
Appearance of headings on member details and member profile screens.
Field explanation
Appearance of field instructions added to form fields, as well as level descriptions on membership application forms.
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 tables you insert into content pages.
Header
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.
Info box
Appearance of the areas used by gadgets to list information.
Examples: upcoming events, event details, forum topics and messages
Links
Font color of text links within the info box.
Links on hover
Font color of text links within the info box when a mouse pointer hovers over them.
Header
Appearance of headings at the top of each info box.
Header on hover
Font color of text links with the info box heading when a mouse pointer hovers over them.
Menu
Item
Appearance of menu items, both active and inactive. You can separately control the font color and background color of active menu items using the Active item setting below.
Item on hover
Font color and background color of inactive menu items when the mouse pointer hovers over them.
Active item
Font color and background color of active menu items.
Login box
These are the elements that appear within a log in form gadget.
Input fields
Appearance of the login fields used to enter the username and password.
Text
Appearance of the text labels that accompany the login fields. If you do not specify settings here, the General formatting > 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
Links
Appearance of the text links that accompany the login fields. If you do not specify settings here, the General formatting > Link 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 > Link on hover settings (above) will be applied to login box links.
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 > 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 > Link 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 > Link on hover settings (above) will be applied to the breadcrumb links.
Current page
Color of the current page within the breadcrumbs.
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.
