The default colors for your site are determined by the Global colors settings. Borders are determined by your site layout and design. If your site is on a Professional, Boutique, or Full Service plan, you can override the color or border settings for specific elements or sections in your layout.
Administrators can make these changes in the Customizer by navigating to Appearance > Customize. This article explains the color and border attributes you can change and where to change them.
Your changes "cascade" downwards from more general settings to more specific elements. But changes to specific elements override the more general settings. For example:
- If you change the Main Text Color in the Main Content Layout & Design panel, the text color in both your post content and sidebar will change.
- If you change the Related Posts Text Color in the Content panel, the text color in the sidebar remains unchanged.
Depending on your design or the element, these are the attributes you can edit:
- Text color: The color of non-clickable text.
- Link color: The color of clickable links.
- Hover color: The color that displays when a user moves their cursor over the element.
- Borders: A line that appears on some or all sides surrounding an element.
- Border width: The pixel width of the border.
- Border color: The color of the border line.
- Background color: The color laying behind the section.
- Drop shadow: A visual effect where an element appears to cast a shadow on the object behind it.
There are two ways to open a panel to edit an element:
- In the site preview on the right, hold Shift and click the element.
- In the panels on the left, navigate to the section where the element is contained.
As you make changes, the Customizer updates with a live preview on the right. When you are happy with the changes, click Publish.
Location of common sections and elements
Depending on your site layout and plan, you can edit the attributes for the sections and elements listed below. Each section or element name is followed by the path to find it in the Customizer. For example, to edit button colors, click Globals, then Buttons.
Buttons: Globals > Buttons
- Header: Header > Layout & Design
- Top Stripe: Header > Top Stripe
- Masthead: Header > Masthead
- Bottom Stripe: Header > Bottom Stripe
- Main Content: Main Content > Layout & Design
- Main Header Stripe: Main Content > Main Header Stripe
- Sidebar: Main Content > Sidebar
- Post Content, Author Bio Box (Boutique and Full Service plans only), Related Posts: Main Content > Content
- Home Page Featured (Full Service plans only): Main Content > Home Page Featured
- Interstitial: Main Content > Interstitial
- Main Footer: Main Content > Main Footer
- Footer: Footer > Layout & Design
- Trailer Top Stripe: Footer > Trailer Top Stripe
- Contact Info: Footer > Trailer Contact Info
- Trailer Extras: Footer > Trailer Extras
- Colophon: Footer > Colophon