How to Use the Color Control Settings

Latest revision as of 21:11, 18 January 2012

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

In PlatformPro, you had to individually configure 24 different color selectors, keeping your Secondary & Tertiary elements slightly darker than your Primary elements. In PageLines 2.0, we've made this easier.

Using color math, PageLines 2.0 automatically calculates the proper levels for Secondary & Tertiary elements. The calculation is based on the Primary element color that you set. This reduces the number of color options from 24 to 8, making it easier than ever to set up good looking elements that work well together. As always, you can still edit these selectors manually by using CSS. Checkout Custom CSS for more information on how to know which color CSS selector to use.

[edit] 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:

[edit] 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.

[edit] 2. Basic Layout Colors

Use these settings to change the colors of your layout backgrounds. You can enter 6 digit hexadecimal code 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.

[edit] 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, h4 etc. headings.

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

[edit] 4. Site Background Image

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

[edit] Basic Layout Colors

Page Background Color

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

Based on the colors you choose, Color Control will automatically change the secondary and tertiary colors and pick the best complimentary colors for you. You can change these colors with custom code if you like.

[edit] Page Text Colors

Page Text Colors

The best way to describe what the Page Text Colors do is to show you where they make changes.

Lets add some elements to a page that will be affected by the color changes.

1. Choose a page to edit from Wordpress, and lets add a page title with an H1 font type. Save your page
2. If you are using the Visual Editor you can select the text and change the font style from Paragraph to Heading 1
3. Now head back to the Color Control settings and change the Page Text Colors. Yours will look better than this example but lets just look at a rainbow of colors to show the changes
4. See the image to the right to look at the changes

[edit] Site Background Image

Background Images

If you would like to set the background to something other than a single color; you can upload your own image here.

Lets go over adding your background image and positioning it on the page:

1. Click on Upload Image and browse your computer for the image you would like to use
2. If you are using the default Color Control settings you may want to change the Content Area Background to something other than transparent.
3. Set Background Image Repeat Lets you choose to repeat the image in a vertical column and horizontal row or to tile it vertically and horizontally across the entire page
4. Vertical Position in Percent allows you to move the image down the page
5. Horizontal Position in Percent allows you to move the image to right of the page
6. With Set Background Attachment you can choose to have your image remain static or have it scroll down the page as the user scrolls the site

[edit] Supersize Site Background Image

Background Images

If you would like your background to fill the entire size of a browser window, you can super size your background:

1. Simply check the "Supersize The Background Image" and "Save Options"