How to Use the Color Control Settings
(→2. Basic Layout Colors) |
(→2. Basic Layout Colors) |
||
| Line 22: | Line 22: | ||
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. | 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 | + | 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. | * To make the background transparent you can leave the options blank by deleting the hexadecimal text. | ||
Revision as of 00:32, 21 September 2011
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.
Contents |
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 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.
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.
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.
- First lets change the Page Background to #115ba5 you can paste this into the Page Background section
- Save your changes and look how the Page Background color now covers the entire site
- So thats a little hard to read. Lets change the content area color so you can read the text
- 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.
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.
- Choose a page to edit from Wordpress, and lets add a page title with an H1 font type. Save your page
- If you are using the visual editor you can select the text and change the font style from Paragraph to Heading 1
- 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
- See the image to the right to look at the changes
Site Background Image
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:
- Click on Upload Image and browse your computer for the image you would like to use
- If you are using the default Color Control settings you may want to change the Content Area Background to something other than transparent.
- 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
- Vertical Position in Percent allows you to move the image down the page
- Horizontal Position in Percent allows you to move the image to right of the page
- 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