• General formatting
• Gadget styles
• Button styles
• Menu
• Login box
• Breadcrumbs
• Navigation links
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 Blueprint 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 top portion 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 setting below.
Header
The background of the center portion of the outer
header.
Outer header 1
The bottom portion of the header area.
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 bottom
header area. This is a
sticky placeholder
that creates a non-scrolling area, suitable for sticky menus.
Outer sidebar
The background of the sidebar to the left
of the Content area.
Sidebar
The 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
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
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
Controls the appearance of text formatted using text styles.
Normal
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
Normal setting.
Wide
Appearance of text formatted using the
Wide text style.
Narrow
Appearance of text formatted using the
Narrow text style.
Link
Appearance of text links. The
Link setting will supersede the
Normal 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.
H1
Appearance of headings formatted using the
H1 style.
H2
Appearance of headings formatted using the
H2 style.
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
H5
Appearance of headings formatted using the H5 style.
Quoted
Appearance of text formatted using the
Quoted text style.
Text alternative
Appearance of text formatted using the
Alternative text style.
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
Controls the appearance of the areas used to list information within
gadgets.
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.
Box
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
Appearance of links within the footer area.
Footer link on hover
Appearance of links within the
footer area when a mouse pointer hovers over them.
List
Controls the appearance of text within lists such as the list of forum topics.
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.
Gadget styles
For each of the available gadget styles for this theme, you can customize the following elements:
Title
The appearance of the gadget title. You can
specify text attributes 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.
Body
The appearance of the gadget body. You can specify
text attributes for the body text, and a background color or image for the
body area. 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 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.
Donation bar
The fill 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 ground
The background color of the donation
progress bar. You can select a color from the drop-down palette or enter the
hexadecimal code for the color.
Date and time
Controls the appearance of the date and
time labels within forum update gadgets and recent blog posts gadgets.
Location
Controls the appearance of the location label
within upcoming events gadgets.
Author
Controls the appearance of the author label
within forum update gadgets and recent blog posts gadgets.
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.
Menu
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.
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.
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.
Navigation links
Controls the 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 a
mouse pointer hovers over them.