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.

 

How to customize your theme

1. Click Theme Options → Customize Colors OR
2. Click Appearance → Themes
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)

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

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.

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 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

 

See The Writer: Creating Posts for details on Post customization

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.