We recommend you give those volunteers you trust with the customization of your website Site Admin roles, as that is the only role that can both view and add colors and fonts. For some ideas about how other groups have customized their website, see the Inspiration Gallery.

About Colors

Colors are used in different locations on each layout.  Generally, body colors are used in the main content (body) section of the website.  The secondary and strong colors can be used in various locations (sidebar, menus, headers, etc) depending on the layout. Changing colors is easy, and our Color Picker (see the description and images below in the Main Body Colors section) helps you by displaying your current color and the color you are considering.

The options on the Color Scheme/Fonts page for color are for changes to:

• Main body colors
• Secondary body colors
• Strong body colors

Using the color picker

Tapping the icon to the right of each field that looks like a checkerboard of colors, opens the Color Picker. Simply tap within the main bars of the color picker to select a color.

In the bottom of the color picker, you'll see the Current Color field. The letters and numbers in that field are the HTML code for the color currently in use. Notice that as your cursor hovers over the bars of color, the top square on the right changes color to the color you are viewing, while the bottom square shows the color you clicked. Neither of these colors is in use until you click Save Color. In the example below, we tapped the green color on the bottom and then hovered over the blue color on top. However, you'll see that the Current Color field still shows the color in use is white.

Main Body Colors

The image below is the screen that opens when you click the Main Body Colors link from the top of the page. It shows the options for the main colors. See the explanations for each below.

Background Color

Select or type in the HTML code for the color you would like to use in the background of your pages.

Font Color

Select or type in the HTML code for the main body font color you would like to use. The font color should contrast enough with the background color to make it easy to read. You can always scroll down to the lower left of the colors and fonts page and preview your color selections. Incidentally, the boxes to the left of the color options list show you the existing colors.

Link Color

Select or type in the HTML code for the main body link color you would like to use. This is the color that will be used when you add a link to a page or file.

Visited Link Color

Select or type in the HTML code for the visited link color you would like to use in the main body.  The visited link color is used on links that the visitor has clicked in the recent past.

Active Link Color

Select or type in the HTML code for the main body active link color you would like to use.  The active link color is used on a link to the current (active) page.

Hover Link Color

Select or type in the HTML code for the main body hover link color you would like to use.  The hover link color is used when the visitor hovers the mouse over the link.

Secondary Body Colors

Secondary body colors are the colors used outside the main page of your website. For instance, in the example below, the color white is in the middle of the webpage, the strong color purple is used in a bar on either side, and the lighter purple is a highlight color, not for text, but for the page. The dark color of purple is secondary to the main color, which is white. The lighter purple color in the Subscribe! box is a Strong color.

Background Color

Select or type in the HTML code for the secondary body background color you would like to use.

Font Color

Select or type in the HTML code for the secondary body font color you would like to use for the text in the secondary background color spaces on your web site. In our example, the font color is white on the dark purple background.

Link Color

Select or type in the HTML code for the secondary body link color you would like to use.

Visited Link Color

Select or type in the HTML code for the secondary body visited link color you would like to use.  The visited link color is used on links that the visitor has click in the recent past.

Active Link Color

Select or type in the HTML code for the secondary body active link color you would like to use.  The active link color is used on
a link to the current (active) page.

Hover Link Color

Select or type in the HTML code for the secondary body hover link color you would like to use.  The hover link color is used when the visitor hovers their mouse over the link.

Strong Body Colors

In the example above, the lighter color of purple is a strong color box.

Background Color

Select or type in the HTML code for the strong body background color you would like to use.

Font Color

Select or type in the HTML code for the strong body font color you would like to use.

Link Color

Select or type in the HTML code for the strong body link color you would like to use.

Visited Link Color

Select or type in the HTML code for the strong body visited link color you would like to use.  The visited link color is used on links that the visitor has clicked in the recent past.

Active Link Color

Select or type in the HTML code for the strong body active link color you would like to use.  The active link color is used on a link to the current (active) page.

Hover Link Color

Select or type in the HTML code for the strong body hover link color you would like to use.  The hover link color is used when the visitor hovers their mouse over the link.

Selecting your colors

To choose a background color, enter the hexadecimal value in the text box, or click the icon to use the color picker bars and then select the color you want to use from the color picker. The sample will change as you select different background colors and font colors. Your selections are not made permanent until you click the Save Colors button.

At the bottom of the page, you have the following options:

Cancel: Cancel any changes you have made to the colors

Save Colors: Save the color choices

Preview Colors: Temporarily change the layout and colors selected on the page. You are the only person who will see the new colors. This gives you the opportunity to see the layout and colors and decide if you like them.

Experimenting with colors

Changing colors and selecting the right colors for your website is a little more difficult than selecting a font.  But we’re here to help you. If you run into trouble or you can’t do what you want to do, just ask for help.

Your first stop on the page is Main Body Colors, which determines the primary colors on your web pages.  You’ll notice that you have a choice for background color, text, link, visited link, active link, and hover link.  Secondary colors are next on the page to select.  Here’s a screenshot from one of our orgs.  The screenshot from the website is on the left; the selections on the Color and Font Options page is on the right.

The main color is white, and is in the middle of the web pages, and the secondary color is the purple color.

Your last choice is the selection of the Strong Color, which is an alternate to the main and primary.

Experiment with a color, then scroll to the bottom to click the Preview Colors button to see the color you changed in use on your website.

Font family and size

Font Family

Select the font family you would like to use from the drop-down menu.  Only web browser-friendly (compatible) fonts are listed. As you make a selection to the Font Family at the top of the section, the font changes in the field at the bottom.

Base Font Size

Select the font size you would like to use from the drop-down menu. Again, you can preview your selection in the field at the bottom of the selection.

Experimenting with fonts

Go to Website > Color & Font Options to start some fun.  You have two ways to customize your website “look and feel” from this menu.

At the top of the page, you can customize the font family and the size of the basic text.  As you change the font family, you will see the field beneath your selection changes to let you preview the font.  In general, we recommend Arial, Tahoma or Trebuchet for readability but it is your choice!

Remember, there is some psychology to selecting a font and the basic size.  Search out articles about fonts for websites when you’re ready for some fancier footwork. Or check out our Inspiration Gallery to see what others do.  Most people choose a basic font size of 14-18 pixels.