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.

The Writer: Customize Colors

You can customize your theme 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 Theme Color Scheme section:

generaltheme_custom_dynamo

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 Theme OptionsCustomize Colors OR
  2. Click AppearanceCustomize

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

  • General Theme Options
  • Header Color Scheme
  • Sidebar Color Scheme
  • List Pages Color Scheme
  • Single Pages Color Scheme
  • Comment Section Color Scheme
  • Footer Color Scheme

Below offers some detail on what these options affect:

Header

Changes the top bar containing the logo and menu.

  • Header Container – background color of the top bar
  • Header Title – color of the site title, if enabled
  • Header Tagline – color of the tagline text, if enabled
  • Menu Switch – color of the “menu” link text

Sidebar Color Scheme

Affects the slide-in sidebar links and default widget content (note that elements inside the Facebook and Twitter widget may only be customized in the widget options)

  • Sidebar Container – background of the sidebar
  • Menu Links -color for navigation link text
  • Menu Links Hover -hover color for navigation links
  • Widget Titles – main titles above each widget, if used
  • Widget Content -general color of text inside widgets (does not affect Twitter or Facebook content)
  • Links – general text color for links inside widgets
  • Links Hover – general hover color for links inside widgets

 

List Pages Color Scheme

This controls the color of the home page, archives, blog and category pages. With your homepage active in the preview screen, you should be able to see what each option does with the exception of hover colors.

  • Content Container Background – the main background color behind the posts.
  • Section Title Background – On the blog and category pages, the Section title appears at the top under the logo/nav bar
  • Section Title Text – Title text color inside the section title banner
  • Block Backgrounds – default background color for your post blocks. You may set individual colors or images from within the post options
  • Post Titles & Meta – default post title and author/category/date text color
  • Post Excerpts – default color of excerpt text
  • Pagination Background – Color of the pagination button
  • Pagination Background Hover – hover color of the pagination button
  • Pagination Text Color – color of the little arrow inside the pagination button
  • Pagination Label Color – color of the “Page X of Y” text

 Single Pages Color Scheme

This section controls the default colors in  your individual posts and pages. You may further refine per-post or per-page colors and more using the Post options panel and post Custom CSS.

  • Title Background – default background color of the post header. Your individual post options colors/image will override this.
  • Post Titles & Meta Text – default color of post titles and author text in the header. Your individual post options colors will override this.
  • Content Background – default background color of the content area.
  • Content Text –  default color of the post content text. Further customize this when constructing your post by using the color and style options in the post editor toolbar.
  • Content Links – default color of the link in your posts or page content. Further customize this when constructing your post by using the color and style options in the post editor toolbar.
  • Content Links Hover – default color of the link hover color in your posts or page content.
  • Footer Meta – default color of the  author/date/category text below the post.
  • Footer Meta Links – default color of links in the meta below the post (category, author name)
  • Next/Previous Post Links – default link color of the next and previous post titles
  • Next/Previous Post Links Hover – default hover color of the next and previous post titles
  • Tags Backround – background color of tag block
  • Tags Link Color – color of the tag links
  • Author Block Background – background color of the author block, if enabled
  • Author Block Text – default color of the author name and bio inside the author block

Comments – Thread

  • –  background color of the comments area
  • – background color of the comments list
  • – Link color of comment subjects and commenters
  • – background color of the individual comment block
  • – text color of the date etc
  • – color of the comment form label text “Name”, “URL” etc
  • – color of the “Submit” text
  • – background color of the submit button
  • – color of the submit button when hovered

 

Footer – Container

Change the main background color for the footer area containing the copyright, etc if enabled in Theme Options.

  • – background of the footer bar
  • – border along the top of the footer bar. Make this the same as your container background if you don’t like the border look.
  • – color of text in the footer
  • – color of links in the footer, if any
  • – hover on links in the 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 pages. 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

 

See The Writer: Creating Posts for details on Post customization

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.

Typography Manager

Font and font size may be customized for global elements in the theme via the Typography Manager under Theme Options. Note that Dynamo does not have color options in the Typography manager, as they are controlled using the Theme Color Schemes above.


WooCommerce