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 OR
2. Click Appearance → Themes
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

Site Title & Tagline

1. Site Title: This is displayed in the browser’s title bar and is the same setting under Settings → General.
2. Tagline: Also displayed in the browser’s title bar, you may optionally leave this blank.

General Theme Settings

1. Use the Default? Select Yes if you need to reset, or No for your custom colors to take effect.
2. Custom Logo: Upload an image to replace the “Ambition” 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.

• Logo Header Background – Background color of the top bar containing the logo and tagline
• Header Text – Color of your logo if an image is not used
• Navigation Background – Color of the nav bar (affects both header and footer menu bar)
• Navigation Links & Link Hover – Color of your menu links – affects both menus and submenus
• Navigation Hover – Color of the hover background
• Nav Borders – Color of the border around the nav bars

Content Color Scheme

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. Content Background

1. Content Background – color of content areas, white by default
2. Content Borders
3. Alternative Container Background – color of slider background and related video box
4. General Body Text – Note that this settting is also affected by the typography manager
5. Links – affects links in the content area – also affected by typography manager
6. Links Hover – hover color for links in content area
7. Post Titles – post titles on posts and in widgets
8. Section Titles – titles above sections/widgets in homepage
9. Page Titles – page titles independent of post title color
10. Content Widget Background – color of content tab below the image in content widget – main color is affected by content background
11. Content Widget Background Hover – hover color for tab – note that the arrow is an image. To change it from red you must edit the sprite in your base color style folder.
12. Buttons – slider buttons
13. Buttons Text – arrow color on buttons
14. Buttons Hover Background – color of button on hover

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.

1. Footer Widget Titles – color of widget titles place in the footer panel
2. Footer Background – color of main footer area – black by default
3. Footer Links – color of links in the footer – does not affect the navigation bar which is covered by the navigation color scheme
4. Footer Links Hover – color of link hover
5. Footer Text – color of basic text in footer widgets
6. Footer Copyright Text – color of text in the bottom copyright bar
7. Footer Copyright Background – background color of bottom bar

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

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