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.

Foundation: Customization

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 AppearanceThemes
  3. Click Customize next to the theme thumbnail.

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

  • General Theme Options
  • Header
  • Sidebar
  • Posts
  • Buttons
  • Footer

Below offers some detail on what these options affect:

Header

Changes the top bar containing the logo and menu.

  • Header Background – background color of the top bar on interior pages
  • Menu Button Background – background for the menu button – typically only needed if your header background is white. To keep transparent, click Clear
  • Menu Label – color of the text next to the menu button
  • Logo Text (if no image)

express-custom-header

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 Panel Background – Color of the sidebar/expanding menu
  • Menu Links – color of the main menu links
  • Menu Links Hover – color of the link text when hovered
  • Menu Links Hover Background – color of the background of the menu link when hovered.
  • Sidebar Widget Links – color of link text in widgets. Note that some widgets have their own styling that overrides this, such as Twitter and Facebook.
  • Sidebar Widget Links Hover – color of links in widgets when hovered
  • Sidebar Widget Border – color of the divider between widgets
  • Sidebar Widget Titles – color of unlinked widget titles
  • Sidebar Widget Text – color of unlinked text in widgets. Note that some widgets have their own styling that overrides this, such as Twitter and Facebook.

 Anchors

Anchors refer to the little dots on the homepage that appear when you scroll. These two options control the dot color and hover color.

Posts & Pages

Changes the color of the content area on interior pages and posts.

  • Content Background – page background color
  • Post Title – post title color
  • Post Title Hover – post title when hovered
  • General Text Color – color of all inlinked text that is not styled separately. Note that your post content can vary depending on how you style it in the post editor.
  • General Link Color – color of all links not affected by other styling, including next and previous links. Note that your post content can vary depending on how you style it in the post editor.
  • General Link Hover Color – color of general links when hovered
  • Post Meta – color of the date, tags etc
  • Content Borders – color of borders

foundation-custom-post

Comments

This section controls the comments box on posts or pages. Please note the buttons such as Reply and Submit are covered under the next section, buttons.

  • Comments Background – color of the bsckground of comments
  • Comment Titles & Text – color of poster’s name and comment text
  • Comment Links – color of links in the comment area
  • Form Background – bottom area background containing the reply form
  • Form Borders – borders/dividers in the form area
  • Form Text & Labels – color of labels on form fields and miscellaneous text in the form area
  • Form Fields Background – color of the form fields
  • Form Fields Text – color of text in the form fields.

Buttons

The buttons section gives you detailed control over all of the buttons in the theme and widgets separately.

  • General Button Text – color of text in buttons not covered by other styles, including Search and Submit
  • General Button Background – color of buttons not covered by other styles
  • Button Background Hover – button hover color for general buttons
  • Button Text Hover – color of the button text on hover
  • Read More Button Text – color of the Read More label
  • Read More Border Color – color of the read more button outline
  • Read More Border Hover – color of the outline when you hover over the button
  • Read More Button Text Hover – color of the read more label when hovered
  • Pagination Button – color of the arrow button at the bottom of post archives
  • Pagination Hover – color of the arrow button when hovered
  • Pagination Border – color of the arrow button outline
  • Pagination Border Hover – color of the arrow button outline when hovered
  • Reply Button Text – color of the Reply button text in comments
  • Reply Button Background – color of the reply button in comments
  • Reply Button Background Hover – color of reply button when hovered
  • Reply Button Text Hover – color of reply button when hovered

Footer

The footer is the bar along the bottom of your website containing the footer widgets, and copyright/credits

  • Footer Background – Color of the footer
  •  Widget Titles – color of unlinked widget titles in the footer
  • Widget Links – color of any links in widgets. Note some widgets override this styling, such as Twitter and Facebook widgets
  • Widget Link Hover – widget links when hovered
  • Credits Text – color of the text in the footer
  • Credit Links – color of any links in your text
  • Credit Links Hover – color of links when hovered

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