Have you seen Elementor?

Our flagship product, Layers has been acquired by the team at Elementor.

With a powerful, fast page builder, Elementor is the best way to get your site online with as little effort as possible.

Fall: Customize Colors

You can customize fall in several ways, from the basic options in Theme Options, to full customization using Custom CSS. Below we will walk you through the WordPress Customizer, and explain how you can use the Custom CSS panel and Typography Manager for full customization.

WordPress Customizer

WordPress 3.4+ introduces a user-friendly and simple theme customization panel that assists you in tweaking certain aspects of your theme such as the logo, favicon, colors, background and other standard WordPress display settings. Through the customizer, you can create a completely new color theme to make Ambition reflect your style and personality.

 

Oh no, I screwed up! How can I go back to the theme defaults? You can reset your colors to the default by expanding the General Theme Settings section:customizer-general-theme-options
To help you go back to the theme defaults yourself, we have provided a color key at the end of this section. The customizer is still an early feature of WordPress , and as such is not perfect. If a color change is not updating in the preview panel, Save and refresh the page.

How to customize your theme

  1. Click Appearance → Customize
  2. Expand the General Theme Settings section and select No for Use Theme Default Color Scheme?

You will then have access to the following customizable options, with Obox theme options:

  •  Header Color Scheme
  • Sidebar Color Scheme
  • List Pages Color Scheme
  • Posts & Pages Color Scheme
  • Comments Section Color Scheme
  • Footer Color Scheme

Header

fall-custom-header

 

 Sidebar

fall-custom-sidebar

List Pages

  1.     Content Container Background
  2.     Section Title Text
  3.     Block Backgrounds
  4.     Block Borders
  5.     Post Titles & Meta
  6.     Post Excerpts
  7.     Pagination Background
  8.     Pagination Borders
  9.     Pagination Background Hover
  10.     Pagination Text Color
  11.     Pagination Label Color

fall-custom-list

Posts & Pages

  1.  Title Background
  2. Post Titles & Meta Text
  3. Content Background
  4. Borders
  5. Content Text
  6. Content Links
  7. Content Links Hover
  8. Bottom Meta
  9. Bottom Meta Links
  10. Next/Previous Post Links
  11. Next/Previous Post Links Hover
  12. Tags Backround
  13. Tags Link Color
  14. Author Block Text

fall-custom-post1

fall-custom-post2

Comments

  1.     Comments Container
  2.     Comments Container Border
  3.     Comment List Background
  4.     Comment List Borders
  5.     Titles & Author Names
  6.     Comments Body
  7.     Meta
  8.     Links
  9.     Form Labels
  10.     Submit Button Text
  11.     Submit Button Background
  12.     Submit Button Background Hover

fall-custom-comments

Footer

  1.  Container Background
  2. Container Border
  3. Text Color
  4. Links
  5. Links Hover

fall-custom-footer

When finished customizing, click Save & Publish. You may need to reload the page outside of the customizer to see some changes take effect.

If you have issues seeing changes, clear your browser cache.

Custom CSS

For elements not covered by the Customizer, you can use custom CSS to change just about anything. We offer a Custom Styling area in Theme Options to store your styles, and on individual posts for styling just those posts. This option saves custom CSS in your WordPress database. If your theme files are lost or if you need to reinstall, everything in your database is retained and safe.

  1. Go to Theme Options → General
  2. Enter or paste your styles into the Custom CSS field. You can grab styles using Inspect Element in your browser.
  3. Click Save

Only copy styles you have changed or will customize into these areas – never copy the entire theme stylesheet as this can impede your theme’s ability to recognize important changes we make in hotfixes and theme updates.

The following articles offer some tips on Custom CSS:

 

Elementor

Last Updated September 2, 2014   Product: