The default colors for your site are determined by the Global colors settings. Borders are determined by your site layout and design.
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.
Cascading changes
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.
Customizable attributes
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. The rule dividing posts will always be 1 pixel high.
- 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.
Editing elements
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: Header > Layout & Design
- Top Stripe: Header > Top Stripe
- Masthead: Header > Masthead
- Bottom Stripe: Header > Bottom Stripe
Main Content
- Main Content: Main Content > Layout & Design
- Main Header Stripe: Main Content > Main Header Stripe
- Sidebar: Main Content > Sidebar
- Post Content, Author Bio Box (Blog Plus and Premiere plans only), Related Posts: Main Content > Content
- Home Page Featured (Premiere plans only): Main Content > Home Page Featured
- Interstitial: Main Content > Interstitial
- Main Footer: Main Content > Main Footer
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