How to Use the Color Control Settings
| Line 50: | Line 50: | ||
# So thats a little hard to read. Lets change the content area color so you can read the text | # 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 | # 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== | ==Page Text Colors== | ||
| Line 62: | Line 64: | ||
# 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 | # 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 | # 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. | ||
| + | |||
| + | If you are using the [[Use Color Control#1. Site Design Mode| Full-Width Sections Design Mode]] | ||
[[Category: New Page]] | [[Category: New Page]] | ||
Revision as of 22:21, 20 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 the what the Page Text Colors will 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.
If you are using the Full-Width Sections Design Mode