Color Options Tab

  • This article is relevant for Pearl, Hayes, and Barton theme users. Need help customizing Rania color options? Click here.

The Pearl, Hayes, and Barton themes both include comprehensive Color Options controls directly within the theme! To access, navigate to Appearance > Customize > Color Options.

GLOBAL COLOR SCHEME (START HERE) TAB

This tab is a great place to start if you already have an established color palette for your brand identity. 

If you have worked with a designer previously and they've given you a series of hex codes for your site, you can add them here, for global color application. This should help save you time, so that you don't have to add hex codes for every single area on the site with the tabs on the previous window.

But, in some cases, you might select a color that needs a little tweaking in certain areas of the site. To do this, go back to the main Color Options tab, and navigate through the General Site Colors, Header Colors, and more to target specific areas of your site with preferred colors.

The Color Scheme labels walk you through what each Global Color corresponds to. Look for the titles for Color One, Color Two, Color Three, etc.

INDIVIDUAL COLOR TABS

The rest of the color options are divided into the following tabs:

  • General Site Colors
  • Header Colors
  • Blog Feed Colors
  • Post & Page Colors
  • Footer Colors (Hayes & Barton)


Below is a description of what control settings can be found in each.


GENERAL SITE COLORS
  • Overall site body background and body text copy
  • General link colors
  • General colors for forms (to adjust your comment form further, look for settings in the Post & Page Colors tab)

HEADER COLORS
  • Logo and tagline color
  • Header background color
  • Primary menu color (the menu that will either be underneath your logo, or inline with it)
  • Primary menu dropdown colors (the menus that appear when you hover over an item, and a dropdown menu appears beneath it)
  • Top Bar/Top Menu colors, as well as their sub-menus (if available. In Barton, Top Bar Background is for Stacked (Center) & Inline Header layouts only.)
  • Social Media icon colors, in your top nav bar
  • Search colors: For the button, as well as the search pop up
  • Feature Tab colors: If in use, these settings control the feature tab background, text and hover colors, as well as the dropdown menu (Hayes & Barton)
  • Scroll navigation colors

BLOG FEED COLORS
  • Colors for all sidebars and interstitial content blocks
  • Colors for widgets placed within sidebars and interstitials
  • Grid Feed layout colors (Pearl)
  • Featured Posts Slider colors (Pearl)
  • Featured links colors (Hayes)
  • Post navigation button colors

POST & PAGE COLORS
  • Post titles and entry meta colors
  • Post subtitle color (Hayes & Barton)
  • Post button colors
  • Post Headings
  • Small accents (varies between themes)
  • Classic Post layout colors (Barton)
  • Classic (Large) Post layout colors (Barton)
  • Offset Post layout border and Shop the Post title colors (Pearl)
  • Featured Post layout colors (Hayes & Barton)
  • Grid Feed layout colors (Hayes & Barton)
  • Showcase Post layout colors (Barton)
  • Single Post colors (Barton)
  • Share icons
  • Comment form fields
  • Archives Colors (Barton)

FOOTER COLORS — HAYES & BARTON
  • Logo and tagline colors (Hayes)
  • Footer background and border colors
  • Footer featured widget area: Background and Widget background colors
  • Footer links