Page History
...
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
Main Body Colors
Background Color
The image below is the screen that opens when you click the Main Body Colorslink from the top of the page. It shows the options for the main colors. See the explanations for each below.
Tapping the icon to the right of each field that looks like a checkerboard of colors, opens the Color Picker. Simply tap in 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.
Background Color
Select or type in the HTML code for Enter the main body background color you would like to use in the background.
Font Color
Enter the main 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 shows you the existing colors.
Link Color
Enter the main 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
Enter the main Select or type in the HTML code for the main 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
Enter the main 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
Enter the main 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 their mouse over the link.
Secondary Body Colors
Background Color
Secondary body colors are the colors used outside the main page of your web site. 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 secondary Enter the secondary body background color you would like to use.
Font Color
Enter the secondary Select or type in the HTML code for 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
Enter the secondary Select or type in the HTML code for secondary body link color you would like to use.
Visited Link Color
Enter the secondary Select or type in the HTML code for 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
Enter the secondary Select or type in the HTML code for 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
Enter the secondary Select or type in the HTML code for 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
Enter the strong Select or type in the HTML code for strong body background color you would like to use.
Font Color
Enter the strong Select or type in the HTML code for strong body font color you would like to use.
Link Color
Enter the strong Select or type in the HTML code for strong body link color you would like to use.
Visited Link Color
Enter the strong Select or type in the HTML code for 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
Enter the strong Select or type in the HTML code for 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
Enter the strong Select or type in the HTML code for 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.
...
To choose a background color, enter the hexadecimal value in the text box, or click the icon to use the color swatch 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.
Save Colors: Save the color choices
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.Reset: Cancel any changes you have made to the colors
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.
Overview
Content Tools