Home

Download this help site
(PDF 80MB)

Download

Color and style settings for Treehouse themes (deprecated)

Icon

The non-responsive version of the Treehouse theme set has been deprecated – it has been superseded by a newer responsive version. For information on the responsive version, see Treehouse theme set.

From the Colors and styles screen, you can change the colors and fonts of elements that appear throughout your site. Settings for different elements are grouped into categories. The categories vary depending on the website theme you have chosen.

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

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

Header 1

The background of the center portion of the header area at the top.

Outer header 2

The background of the area directly below the header area at the top. 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 the header area at the top.

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

Footer 2

The background of the center portion of the second footer.

Outer footer 3

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

The background of the center portion of the third footer.

Typography

Element

Controls...

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

H2

Appearance of headings formatted using the H2 style. These headings appear in HTML code within <h1> 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

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

Quoted

Appearance of text formatted using the Quoted style. The text will appear in the HTML code within <span class="quotedText"> tags.

Text highlighted

Appearance of text formatted using the Highlighted style. The text will appear in the HTML code within <span class="contStyleExcInlineHighlighted"> tags.

Form

Element

Controls...

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.

Element

Controls...

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

Controls the appearance of the areas used to list information within gadgets.

Examples: upcoming events, event details, forum topics and messages

Element

Controls...

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.

Box

Element

Controls...

Background color

Background color of boxes appearing on certain gadgets (e.g. blog gadgets).

Header

Appearance of the header area at the top of the box.

Header link

Appearance of links within the header area at the top of the box.

Header link on hover

Appearance of links within the header area at the top of the box when a mouse pointer hovers over them.

Label

Appearance of labels within the box.

Text

Appearance of text within the box.

Link

Appearance of links within the box.

Link on hover

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

Footer

Background color of the area at the bottom of the box.

Footer link on hover

Appearance of links at the bottom the box.

List

Controls the appearance of text within lists such as the list of forum topics.

Element

Controls...

Text

Appearance of text within the list.

Link

Appearance of links within the list.

Link on hover

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

Row

Background color of rows within the list.

Highlighted row

Background color of highlighted row within the list.

Menu

Element

Controls...

Main

Font family and size of top-level menu items.

Drop down

Font family and size of drop-down menu items

Login box

These are the elements that appear within a log in form gadget.

Element

Controls...

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

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.

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.

Link on hover

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

On this page: 

See also:

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