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.

Capital: How to Customize Your Theme

You can customize capital 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 OR
  2. Click AppearanceThemes
  3. Click Customize next to the theme thumbnail.
  4. Expand the General Theme Settings section and ensure it is set to NO to enable use of your custom colors.

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

  • General Theme Options
  • Header -Menu
  • Header – Page Title
  • Header – Breadcrumbs
  • Content
  • Content – eCommerce
  • Comments – Leave a Reply
  • Buttons – Content
  • Buttons – eCommerce
  • Sidebar
  • Sidebar – features
  • Site-Wide – Call to Action
  • Footer – Container
  • Footer – Widgets
  • Footer –  Base

The following options draw from standard WordPress settings and should be set under  the noted page for best results.

  • Colors – Set under Appearance > Background
  • Background Image – Set under Appearance > Background
  • Navigation – Set under Appearance > Menus
  • Static Front Page – Do not set this option or it will break your dynamic homepage

Below offers some detail on what these options affect:

Header -Menu

Changes the top bars containing the navigation, cart and logo.

capital header

  1. Contact Header Background – top bar background color
  2. Contact Header Text – the contact phone number
  3. Contact Header Link – all links in the top bar such as Top menu, email and cart
  4. Contact Header Link Hover – you will not be able to preview this in the Customizer pane – reload the main page after saving
  5. Logo & Menu Background –  second top bar containing main menu and logo
  6. Link – color of main menu links
  7. Link Hover – you will not be able to preview this in the Customizer pane – reload the main page after saving
  8. Sub Menu Background – color of the drop menus
  9. Sub-Menu Link- color of the links in the drop menus
  10. Sub-Menu Link Hover – you will not be able to preview this in the Customizer pane – reload the main page after saving

The icons in the contact header bar (top bar) are images. If you need to change their color or style, you must replace them.  To do so directly, edit and replace the files in images/layout/header-icons/. Note that future theme updates or reinstalls run the risk of overwriting yours, so keep a backup so you can replace them again in the future if needed.

 

Header – Page Title

Changes the ribbon containing the page title on all internal pages and posts.

capital_title

  1.  Background – color of the title banner (blue by default)
  2. Title –  color of the title text
  3. Blurb – color of the title description or excerpt, if enabled in Theme Options

Header – Breadcrumbs

Affects the breadcrumb bar, if enabled in Theme Options. The bar appears on posts below the title ribbon.

bc

  1. Background – Breadcrumbs bar background color
  2. Text – color of current page and separators
  3. Link – color of links (home link and back pages)
  4. Link Hover – color of links when the mouse is over them

 

Content

Content elements refer to page content such as posts, pages and the homepage that does not have its own section. Please note that the post editor determines the actual formatting of the post or page text – the customizer only provides a default text color.

capital-content

  1.     Boxed Layout Page Background – background color of the centered container. This mainy affects the Boxed layout – if you are using the full-width layout, this should match your Container background.
  2.     Container Background – homepage widget area background and content area background of interior pages. Should match your overall Background color set under Appearance > Background for best results.
  3.     Post Title – post titles in archives and widgets and single posts/pages
  4.     Post Title Hover – color of titles when hovered
  5.     Text – general text color. Many other styles may override this, including other customizer colors, colors you apply to your content, or plugins that have their own styling.
  6.     Link – general link color. Many other styles may override this, including other customizer colors, colors you apply to your content, or plugins that have their own styling.
  7.     Link Hover – color of content links when hovered
  8.     Meta – the author/date/category etc accompanying posts or pages
  9.     Border – the border below the title

 

Content -eCommerce

Affects the shop, product blocks and product post area.

capital-ecommerce

  1. Price – Price color in product indexes, widgets and product view
  2. Sale – sale bubble background color
  3. Border – tab border
  4. Tab Background – background color of product reviews & description tabs, and product image background in indexes*
  5. Tab Active – color of the active tab
  6. Tab Text – color of unlinked text inside the tab

*If you make your tab background a different color than your background, you will need to add some padding to your Custom CSS field to keep the contents of the product index from touching the tab edges. Copy the following code into your Custom CSS field to remedy this:

.three-column .products .product{width: 27.33% !important; padding: 10px;}

 

Elements such as buttons and the quantity field are covered under Buttons -eCommerce section

 

Comment- Thread

These colors relate to the comment thread- or the posted replies section of the comments on posts.

capital-comments

  1. Background – background of the comment thread area
  2. Text – comment text
  3. Link – links in the comment thread including title, reply and meta
  4. Link Hover – link hover color
  5. Border – border separating the thread from the reply (red above)

Comments – Reply

The background and text color here affect the reply box. Note that the link color is determined in the Comment Thread section.

reply

Buttons – Content

Affects buttons in general areas of the theme that are not covered by other options (submit, read more, search etc)

  1.     Background – color of the button in its normal state
  2.     Text – color of the label inside the button
  3.     Background Hover – color of the button when hovered
  4.     Text Hover -color of the button label when hovered
  5.     Comment Background – specific color of the Comment submit button
  6.     Comment Text – specific color of the Comment submit text
  7.     Pagination – specific color of the pagination arrow button at the bottom of category archive pages and shop
  8.     Pagination Hover – pagination arrow button hover color.

Buttons – eCommerce

Set individual colors for each botton on the various WooCommerce pages and product listings. Includes widgets.

  1.     Background – color of ecommerce buttons such as Add to Cart
  2.     Text – color of the text inside the button
  3.     Background Hover – color of button when hovered
  4.     Text Hover – color of the button text when hovered
  5.     Quantity Background – specific color of the + and – button on the quantity fields
  6.     Quantity Background Hover – hover color of the + an – buttons
  7.     Coupon – specific color of the Coupon button on the cart
  8.     Coupon Text – color of text in the coupon button
  9.     Coupon Hover – color of coupon button when hovered
  10.     Coupon Text Hover – color of text inside the coupon button when hovered

Sidebar – Blog

Change the colors in your page, shop and post sidebar, if enabled. Does not affect the footer. Note that some plugins or widgets impose their own style such as Facebook and Twitter and may ignore these colors.

  1.     Background – color of the blog sidebar – also changes the Home Page Side-By-Side sidebar background
  2.     Widget Title – color of titles in the sidebar widgets
  3.     Text – general text in the sidebar widgets.
  4.     Link – general link color of widgets in the sidebar.
  5.     Link Hover – color of links when hovered
  6.     Border – divider color

custom_sidebar

 

Sidebar – Features

Colors the sidebar specifically on features/services posts.

featuressidebar

Sitewide Call to Action

Change the color of the bottom ribbon, text and button:

sitewide sitewide_demo

Footer – Container

Change the main background color for the footer area. Expands full-width for full-width layout.

Footer – Widgets & Footer Base

These colors affect the general style of widgets in the footer, and the way your custom text appears:

footer_custom

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

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

If your custom.css file is not loading, add @import url(custom.css); to the Custom CSS field in Theme Options.

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

Font and font size may be customized for global elements in the theme via the Typography Manager under Theme Options.

Customizing Fonts

Font replacement beyond the Typography Manager requires extensive Custom CSS. The following articles provide some direction on how to customize your fonts:


WooCommerce