How to Use the Color Control Settings

Color control lets you choose the main colors that will be displayed on your website.

Using color math, color control will decide the best colors for secondary and tertiary elements of your site. You can always edit these manually by using custom code but color control chooses the best complementary colors to your site design.

Overview

Color Control Overview

Color Control can be found inside the WordPress Administration Panel by clicking on PageLines > Settings and selecting Color Control from the menu.

These are the main features of Color Control:

1. Site Design Mode

You can choose which design mode you would like to display on your site.

• Full Width Sections allows you to have parts of your site be the full width of your browser window; while other elements are the width of the content area.

• Fixed Width Mode will keep all of the parts of your site inside the width of the content area. You can use this mode to set a background for the page and content area can have a separate fixed width background.

2. Basic Layout Colors

Use these settings to change the colors of your layout backgrounds. You can enter 6 digit hexadecimal numbers or click the icon to the left of the hex numbers to use the color selector.

It is important to note that the Body Background color will only appear if the Content Width Page is selected in the Site Design Mode. The Page Background color will appear when Full-width Sections are selected in the Site Design Mode.

• To make the background transparent you can leave the options blank by deleting the hexadecimal text.

3. Page Text Colors

Use these options to customize the colors of the main text on your site.

• Text Headers will change any text that is typically displayed as h1, h2, h3, h3 etc. tags. In plain english this usually means the title of the page and headings in sections or the tops of widgets.

• Primary Text is going to change the color of your main content text.

• Primary Links will change the color of the links in you main content.

• Footer Text as it suggests will change the color of the text that appears in your website footer.

4. Site Background Image

You can upload your own background image to your site here and control how and where it is displayed.

Basic Layout Colors

Lets see how changing the Basic Layout Colors is going to affect your site. The default setup is a transparent Page Background and transparent content Background. Because of this only the Body Background color is being displayed.

1. First lets change the Page Background to #115ba5. You can paste this into the Page Background color box
2. Save your changes and look how the Page Background color now covers the entire site
3. So thats a little hard to read. Lets change the content area color so you can read the text
4. Set the Content Background to #EEEEEE save and check out the page