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.

Motion Picture: Customize Your Theme

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 and choosing Yes, then Save:

cleansale default theme

In the event some colors do not reset, ensure your Typography Manager settings have been cleared or expand the color scheme section and click the Default button.

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.

Before you begin, if you are customizing your theme to use dark colors and background, you should start with the Dark color scheme. Go to Theme Options and choose Dark from the Color Styles drop-down, then head into the customizer.

How to customize your theme

  1. Click Theme OptionsCustomize OR
  2. Click AppearanceThemes
  3. Click Customize next to the theme thumbnail.

You will then have access to the following customizable options, with the theme-specific sections in bold:

  • Site title & tagline
  • General Theme Options
  • Header Color Scheme
  • Content Color Scheme
  • Footer Color Scheme
  • Colors
  • Background Image
  • Navigation
  • Static Front Page

General Theme Settings

  1. Use the Default? Select No to activate your custom color scheme and click Save Changes. Select Yes at any time to go back to the theme defaults. Cli
  2. Custom Logo: Upload an image to replace the theme logo. For best results, use an image that is around 250 pixels wide by 35 pixels tall and is not larger than 450 pixels wide or 200 pixels tall. You can access full custom Logo options under Theme Options
  3. Custom Favicon: This should be a 16px by 16px PNG or transparent gif and appears in the browser’s address bar next to your URL. Access ful favicon options under Theme Options

 

Header Color Scheme

Change the color of elements in the body or layout area. Not ALL classes are included here. To change the color of an element not affected by the customizer, grab the style by right-clicking and choosing “Inspect Element” in your browser, then copy the style into the Custom CSS of your Theme Options area to customize it.

motionpic_header_colors motionpic_header_prev

  1. Header Container – changes background of top banner
  2. Header Container Borders – top and bottom border(above nav)
  3. Navigation container – background for header and footer nav bar and sub menus
  4. Navigation Links – main link color in header and footer nav bar and submenu
  5. Navigation Hover – hover color in header and footer menu and sub-menu

Content Color Scheme

motionpic_content_colors content_prev

The Content Color Scheme covers basic elements in your content area. For elements not covered by these options, see the Custom CSS section at the end of this article.

  1. Content Background – color of content areas, white by default
  2. Post Titles – post titles on posts and in widgets
  3. Post Titles Hover- post titles hover on posts and in widgets – will not preview
  4. Section Titles – titles above sections/widgets in homepage
  5. Date Text – color for dates in homepage widgets
  6. General Body Text – Sidebar and widgets. Note that this settting is also affected by the typography manager
  7. Post Copy Text – Text in posts and pages. Note that this settting is also affected by the typography manager
  8. General Links – affects links in the content area – also affected by typography manager
  9. General Links Hover – hover color for links in content area
  10. Content Borders – borders in widgets, post area and comment area
  11. Post-Meta – color of post meta in category/blog
  12. Post Meta Text – color of the text in the post meta area of category/blog pages
  13. Button Color – affects slider buttons, submit buttons and pagination

Footer Color Scheme

This section adjusts colors exclusive to the footer. Note that elements such as borders or navigation bars are affected by the above themes.

motionpic_footer_colorsmotionpic_footer_prev

  1. – color of widget titles place in the footer panel

Colors

Change general colors such as the Background color. We recommend you use the main Background manager under Appearance Background to see all of the options available to you for the background.

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. 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. Older themes may not have this option.

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

custom.css stylesheet

This option may be easier to manage for advanced designers, but does require backup and maintenance if the theme files need to be reinstalled for any reason.

  1. Go to Appearance Editor
  2. Click the custom.css link in the lower-right corner
  3. Enter or paste your codes on a blank link below any existing text
  4. Click Update File

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.


WooCommerce