You can customize 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 Settings
• Header Color Scheme
• Sidebar  Color Scheme
• Title Color Scheme
• List Pages Color Scheme
• Single Post/Page Color Scheme
• Forms Color Scheme
• Colors
• Footer Color Scheme
• Header Image
• Background Image

Each option is explained with illustration below:

General Theme Settings

Custom Logo

Quick-set the logo. For more control, go to Theme Options → General

Custom Favicon

Quick-set the favicon. For more control, go to Theme Options → General

Reset Color Scheme Settings

Resets all options to default whether Yes or No is chosen. Used for troubleshooting or clearing previous theme color schemes.

Header Color Scheme

• Logo & Menu Bar Background – header area on all pages, if no custom header image is set
• Menu Borders – borders below main menu on homepage
• Site Title (text logo) – color of text-based site title if no logo uploaded
• Tagline – color of the site description/tagline
• Expanded Menu Links – color of links in the expanded menu and submenus
• Expanded Menu Link Hover – link hover color of expanded links and submenus
• Sidebar Toggle – color of sidebar toggle menu label and icon

Sidebar  Color Scheme

• Sidebar Container – background color of slide-in sidebar, if you want it to be different from the main background color
• Widget Titles – color of widget titles. Note that some widgets that link the title (such as Twitter) or plugins widgets with their own styling may ignore this.
• Widget Content – color of text in widgets. This does not include iframe content like Facebook or Twitter.
• Links – Links in general widgets and of the main nav if compact menu is chosen
• Links Hover – Link hover color

Title Color Scheme

• Title/Header Background – global background color of title banner on interior pages, mainly seen on archives/categories. Page template options override this.
• Page/Post Title – global background color of title on interior pages, mainly seen on archives/categories. Page/Post template options override this.
• Title Links – color of links in the title banner, usually the Portfolio categories
• Title Link Hover  – color of links when hovered in the title banner, usually the Portfolio categories
• Title Excerpt & Meta – color of excerpt text  in the title banner, displayed on pages

List Pages Color Scheme

1. List Page Links & Link Hover
2. Block Backgrounds
3. Borders
4. Post Titles
5. Post Excerpts
6. Post Meta
7. Pagination Borders
8. Pagination Border Hover
9. Pagination Text Color
10. Pagination Link Color

Single Post/Page Color Scheme

This section covers single views of your posts, psges and portfolios. It is broken up into two sections, the content area and the comments/related posts section. Note that forms are separated and affect all forms,  not just the comments reply form.

1. Page Background
2. Content Background
3. Borders
4. Content Text
5. Content Links & Link Hover
   
6. Post Element Background
7. Post Element Text Color
8. Next/Previous Post Links & Hover

Forms Color Scheme

Form colors affect all general forms which should also extend to Gravity Forms and Contact Form 7 plugins. Other plugins may require Custom CSS or plugin settings to adopt your form color scheme. This example uses a contact form 7 widget in the sidebar. The light gray background color shown here is the Sidebar container color color found in the Sidebar Color Scheme section.

1. Form Labels
2. Form Text
3. Form Field Color
4. Form Button Background
5. Form Button Text

Colors

This is a standard WordPress setting which sets the general background color. This color may be overridden by other options above. For more control, or to upload a background image, go to Appearance → Background

Footer Color Scheme

• Container Background – main color of the footer bar
• Text Color – color of text in the footer, such as the copyright
• Links – color of text links and also of the social icons, if enabled
• Links Hover – hover color of any links

Header Image

Global option for setting a header bacgkround. This image or texture overrides the color option above, and sets the background in the section containing your logo and navigation. This is only mainly visible on the homepage. For best results, do NOT use this to set a logo – it is best used for textures/background graphics or photos that sit under the header text/logo and menu. Recommended image size is at least 1920px tall and 250px wide. The uploader will allow you to crop the image up to 520px tall to support variations in logo size on your homepage. By default the header is around 250px tall on the homepage and 70px tall on the interior pages.

Background Image

Allows quick-setting of the background image. This may override background color options set in the above sections. For more control such as position and tiling, go to Appearance → Background

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:

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

1. Header Container
2. Header Border
3. Header Title
4. Header Tagline
5. Expanded Menu Links
6. Expanded Menu Link Hover
7. Sidebar Menu Link Text
8. Sidebar Menu Link Icon

 

 Sidebar

1. Sidebar Container
2. Widget Titles
3. Widget Content
4. Links
5. Links Hover

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

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

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

Footer

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

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 in the Custom Styling section. 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:

• Inkdrop2: Post Custom CSS for customizing posts or pages separately

• How to Find the ID or class name for an element to use in Custom CSS

• WordPress: How to Customize Menu Links

• Where can I get help with modifications or advanced Custom CSS?

 

Customizing Fonts

This is covered in the next article, Customize Fonts