Theme Settings

Theme Settings is the centralized location to edit all the global styles for your website.

There are two ways to access Theme Settings, depending on what you're working on.

Settings  → Website → Themes → Trust x YOURCOMPANY child theme

If you're just getting started and haven't created any pages yet, you'll want to access from settings.

Page Editor  → Theme tab → Edit Theme Settings

If you're already building pages and need to make an adjustment, you can do so quickly and easily right from the page editor by clicking the Theme tab.

These settings control the default colors for the site. A brand kit is still available in the portal settings where additional colors can be saved and made available to color pickers.

Primary:
The primary color is the color used for your calls to action. Most of the buttons are configured to be the primary color by default. This color is also sprinkled throughout the theme so this should be your primary brand color as well.

Secondary:
The secondary color is used for your transitional calls to action and also as the color used for backgrounds and image overlays. This color should complement but contrast your primary color.

Typography:
The typography color is the default color set to all the typography (h1 - h6, body, etc.). This color can be overridden in the Typography section below. If the individual typography items are never overridden, they will always inherit this value.

Additional Colors:
These are the most used colors throughout the theme other than your Primary, Secondary and Typography colors. Here you can control shades of White, Black, Dark Grey, Grey and Light Grey to adjust the UI to your branding colors.

• White: In some cases this may need to be adjusted to a darker version of white like an off-white. This is one of the default choices for module settings like background colors.
• Black: In some cases this may need to be adjusted to a muted version of black depending on your branding. This is one of the default choices for module settings like background colors.
• Dark Grey: The dark grey color is used for many elements of the theme's UI and is one of the default choices for module settings like background colors.
• Grey: The grey color is used for many elements of the theme's UI and is one of the default choices for module settings like background colors.
• Light Grey: This is your grey color. The grey color is used for many elements of the theme's UI and is one of the default choices for module settings like background colors.

These are the settings to control the primary and secondary font for the entire site. Some view these as follows: Primary = Headings and Secondary = Body/Paragraph Text.

Primary (Headings)
The primary font is used for all the headlines on the site (h1 - h6) by default. These can be overridden individually in the typography section below, but when unchanged, this is a great place to change all the site heading fonts in one shot since they will inherit that change automatically as long as they haven't been overridden.

Secondary (Body/Paragraph)
The secondary font is used for all the body copy, links, inputs and buttons on the site by default. These can be overridden individually in their respective sections below, but when un-changed, this is a great place to change all the site heading fonts in one shot since they will inherit that change automatically as long as they haven't been overridden.

Below are the settings to control the overall typography of the site: H1, H2, H3, H4, H5, H6, Body and Links. These inherit the fonts specified in the fonts section one level back.

Heading One (H1)
Here you can override the default Primary font settings specified in the Fonts section one level back.

• Font Settings: Family, Size, Color, Weight, Text Decoration
• Text Transform: This sets the capitalization style for the font above.
• Line Height: This sets the line height for the font above.
• Letter Spacing: This sets the space between the characters for the font above.
• Mobile Responsive: Here you can control the values used for smaller/hand-held devices.
  • Font Settings: Size
  • Line Height: This sets the line height for the font above.

Heading Two (H2)
Here you can override the default Primary font settings specified in the Fonts section one level back.

• Font Settings: Family, Size, Color, Weight, Text Decoration
• Text Transform: This sets the capitalization style for the font above.
• Line Height: This sets the line height for the font above.
• Letter Spacing: This sets the space between the characters for the font above.
• Mobile Responsive: Here you can control the values used for smaller/hand-held devices.
  • Font Settings: Size
  • Line Height: This sets the line height for the font above.

Heading Three (H3)
Here you can override the default Primary font settings specified in the Fonts section one level back.

• Font Settings: Family, Size, Color, Weight, Text Decoration
• Text Transform: This sets the capitalization style for the font above.
• Line Height: This sets the line height for the font above.
• Letter Spacing: This sets the space between the characters for the font above.
• Mobile Responsive: Here you can control the values used for smaller/hand-held devices.
  • Font Settings: Size
  • Line Height: This sets the line height for the font above.

Heading Four (H4)
Here you can override the default Primary font settings specified in the Fonts section one level back.

• Font Settings: Family, Size, Color, Weight, Text Decoration
• Text Transform: This sets the capitalization style for the font above.
• Line Height: This sets the line height for the font above.
• Letter Spacing: This sets the space between the characters for the font above.
• Mobile Responsive: Here you can control the values used for smaller/hand-held devices.
  • Font Settings: Size
  • Line Height: This sets the line height for the font above.

Heading Five (H5)
Here you can override the default Primary font settings specified in the Fonts section one level back.

• Font Settings: Family, Size, Color, Weight, Text Decoration
• Text Transform: This sets the capitalization style for the font above.
• Line Height: This sets the line height for the font above.
• Letter Spacing: This sets the space between the characters for the font above.
• Mobile Responsive: Here you can control the values used for smaller/hand-held devices.
  • Font Settings: Size
  • Line Height: This sets the line height for the font above.

Heading Six (H6)
Here you can override the default Primary font settings specified in the Fonts section one level back.

• Font Settings: Family, Size, Color, Weight, Text Decoration
• Text Transform: This sets the capitalization style for the font above.
• Line Height: This sets the line height for the font above.
• Letter Spacing: This sets the space between the characters for the font above.
• Mobile Responsive: Here you can control the values used for smaller/hand-held devices.
  • Font Settings: Size
  • Line Height: This sets the line height for the font above.

Body Font
Here you can override the default Secondary font settings specified in the Fonts section one level back.

• Font Settings: Family, Size, Color, Weight, Text Decoration
• Text Transform: This sets the capitalization style for the font above.
• Line Height: This sets the line height for the font above.
• Letter Spacing: This sets the space between the characters for the font above.
• Mobile Responsive: Here you can control the values used for smaller/hand-held devices.
  • Font Settings: Size
  • Line Height: This sets the line height for the font above.

Body Links
Use the controls directly below to set the initial state for the links contained in your body copy. The accordion marked "Hover'' will control the hover state. Some fields are omitted from the hover state controls to observe best practices.

• Font Settings: Family, Size, Color, Weight, Text Decoration
• Text Transform: This sets the capitalization style for the font above.
• Line Height: This sets the line height for the font above.
• Letter Spacing: This sets the space between the characters for the font above.
• Hover State
  • Font Settings: Color, Weight, Text Decoration
• Mobile Responsive: Here you can control the values used for smaller/hand-held devices.
  • Font Settings: Size
  • Line Height: This sets the line height for the font above.

Below are the settings to control all the different button styles for your site. General Buttons is where you establish the structure of your main buttons. In Simple Link-Buttons you can configure the style for simple buttons like the ones shown in cards and learning center. Then, under Button Color/Hover Settings all the colors are configured.

General Buttons

Below are the settings for your button calls to action sprinkled throughout the site. The background, border, text and hover colors are configured separately below. Also, there are choices around color where these are configured within the modules.

• Font Settings: Family, Size, Weight
• Text Transform: This sets the capitalization style for the font above.
• Vertical Padding: This sets the space between the edge of your button and the text on the top and bottom of your buttons.
• Horizontal Padding: This sets the space between the edge of your button and the text on the left and right of your buttons.
• Line Height: This will control the line-height of your button text.
• Minimum Width: This value ensures your buttons have a minimum width to preserve consistency. If the amount of text or the padding is larger than this amount, your buttons may be wider.
• Letter Spacing: This will control the separation between the characters of your button text.
• Border
  • Width: This will control the border width for your buttons. This is most visible and necessary for Ghost/Transparent button versions.
  • Border Radius: This sets the curve of the corners for your normal buttons.

Simple Link-Buttons

Below are controls over the Simple Link-Buttons, which look like a link, but have some custom functionality and animation. These link-buttons are usually located at the bottom of module repeating cards and columns.

• Font Settings: Family, Size, Weight
• Text Transform: This sets the capitalization style for the font above.
• Letter Spacing: This will control the separation between the characters of your button text.
• Hover
  • Font Settings: Weight

Button Color/Hover Settings

Below are color settings to control the way your primary, secondary, white and simple buttons look by default, as well as, when they are hovered.

• Primary Button: Below are the color settings for your primary call-to-action button.
  • Text Color: This will set the background color of your primary call-to-action buttons.
  • Text Hover Color: This will set the background color of your primary call-to-action buttons.
  • Background Color: This will set the background color of your primary call-to-action buttons.
  • Background Hover Color: This will set the background color of your primary call-to-action buttons when they are hovered.
  • Border Color: This will set the border color of your primary call-to-action buttons.
  • Border Hover Color: This will set the border color of your primary call-to-action buttons when they are hovered.
  • Transparent - Primary Button: Below are the color settings for the transparent version of your primary call-to-action button.
    
    • Text Color: This will set the background color of the transparent version of your primary call-to-action buttons.
    • Text Hover Color: This will set the background color of the transparent version of your primary call-to-action buttons.
    • Background Color: This will set the background color of the transparent version of your primary call-to-action buttons.
    • Background Hover Color: This will set the background color of the transparent version of your primary call-to-action buttons when they are hovered.
    • Border Color: This will set the border color of the transparent version of your primary call-to-action buttons.
    • Border Hover Color: This will set the border color of the transparent version of your primary call-to-action buttons when they are hovered.
• Secondary Button: Below are the color settings for your secondary call-to-action button.
  • Text Color: This will set the text color of your secondary call-to-action buttons.
  • Text Hover Color: This will set the text color of your secondary call-to-action buttons when they are hovered.
  • Background Color: This will set the background color of your secondary call-to-action buttons.
  • Background Hover Color: This will set the background color of your secondary call-to-action buttons when they are hovered.
  • Border Color: This will set the border color of your secondary call-to-action buttons.
  • Border Hover Color: This will set the border color of your secondary call-to-action buttons when they are hovered.
  • Transparent - Secondary Button: Below are the color settings for the transparent version of your secondary call-to-action button.
    
    • Text Color: This will set the background color of the transparent version of your secondary call-to-action buttons.
    • Text Hover Color: This will set the background color of the transparent version of your secondary call-to-action buttons.
    • Background Color: This will set the background color of the transparent version of your secondary call-to-action buttons.
    • Background Hover Color: This will set the background color of the transparent version of your secondary call-to-action buttons when they are hovered.
    • Border Color: This will set the border color of the transparent version of your secondary call-to-action buttons.
    • Border Hover Color: This will set the border color of the transparent version of your secondary call-to-action buttons when they are hovered.
• White Button: Below are the color settings for your white call-to-action button.
  • Text Color: This will set the text color of your white call-to-action buttons.
  • Text Hover Color: This will set the text color of your white call-to-action buttons when they are hovered.
  • Background Color: This will set the background color of your white call-to-action buttons.
  • Background Hover Color: This will set the background color of your primary call-to-action white when they are hovered.
  • Border Color: This will set the border color of your white call-to-action buttons.
  • Border Hover Color: This will set the border color of your primary call-to-action buttons when they are hovered.
  • Transparent - White Button: Below are the color settings for the transparent version of your white call-to-action button.
    • Text Color: This will set the background color of the transparent version of your white call-to-action buttons.
    • Text Hover Color: This will set the background color of the transparent version of your white call-to-action buttons.
    • Background Color: This will set the background color of the transparent version of your white call-to-action buttons.
    • Background Hover Color: This will set the background color of the transparent version of your white call-to-action buttons when they are hovered.
    • Border Color: This will set the border color of the transparent version of your white call-to-action buttons.
    • Border Hover Color: This will set the border color of the transparent version of your white call-to-action buttons when they are hovered.
• Simple/Link Button: Below are the color settings for your simple call-to-action button links.
  • Text Color: This will set the text color of your simple call-to-action button links.
  • Text Hover Color: This will set the text color of your simple call-to-action button links when they are hovered.
• Video Play Button: Below are the color settings for your video play buttons (circle color and play icon).
  • Circle Background Color: This will set the background color of your video play indicator buttons.
  • Play Icon Color: This will set the color of the play icon inside your video play indicator buttons.
  • Circle Background Hover Color: This will set the background color of your video play indicator buttons when they are hovered.
  • Play Icon Hover Color: This will set the color of the play icon inside your video play indicator buttons when they are hovered.

Below are the settings to control the global form styles.

Forms: Background Color: This will set the background color for all the forms on the site.
Forms: Border Color: This will set the border color for all the forms on the site.

Title

Below are the controls for your form titles. This is the text included at the top of your forms should you configure any.

• Title: Background Color: This will set the background color for all the form titles on the site.
• Font Settings: Family, Size, Color, Weight - Use this to override the default H3 configured for your form titles (directly above the form).

Labels

Below are the controls for your field labels. For example: text fields, password fields, search fields, select dropdown fields, text areas, etc. all have labels above them to specify what information is expected from the site visitor.

• Font Settings: Family, Size, Color, Weight - Use this to override the default Body Font for your field labels (directly above single input fields).
• Padding Bottom: This value will control the vertical space between field labels and the adjacent input.

Fields

• Background Color: This will control the background color of your single input fields.
• Font Settings: Family, Size, Color, Weight - These are the font settings for the single input fields. This will apply to both placeholder text and text input by your site visitors.
• Padding Vertical: Applies padding to all single input fields. Does not apply to checkbox or radio fields.
• Padding Horizontal: Applies padding to all single input fields. Does not apply to checkbox or radio fields.
• Border: Below are the border settings for your single input fields. Applies to all single input fields. Does not apply to checkbox or radio fields.
• Border Color: This sets the color of the border around your single input fields.
• Border Width: This sets the width of the border around your single input fields.
• Border Radius: This sets the curve of the corners for your single input fields.

NOTE: Form Submit buttons inherit their styles from the primary, secondary and white options configured under Buttons. There are choices within the form-enabled modules to select which of those styles to use for each form use-case.

Below are the settings to control the site header styles.

Hello/Promotional Bar

Below are the controls for the hello/promotional bar which can be enabled in the Header module's global settings. This is the area that slides in at the top of the site.

• Background Color: This sets the background color of the promotional bar at the top of the site (above the header).
• CTA: Background Color: This sets the background color of the call-to-action button inside the promotional bar at the top of the site (above the header).
• CTA: Text Color: This sets the background color of the call-to-action button inside the promotional bar at the top of the site (above the header).
• CTA: Background Hover Color: This sets the background color of the call-to-action button inside the promotional bar at the top of the site (above the header) when it is hovered.
• CTA: Text Hover Color: This sets the background color of the call-to-action button inside the promotional bar at the top of the site (above the header) when it is hovered.
• Close/Hide Icon Color: This sets the color of the icon that is used to close/hide the promotional bar at the top of the site (above the header).
• Desktop Font Settings: Family, Size, Color & Weight
• Mobile Font Settings: Family, Size, Color & Weight

Default/Solid Header

This will control the default header styles for the entire site. There are on-page controls to make the header transparent. These are the settings for the solid version of the header.

• Admin/Top Bar:

  • This is the area between the Hello/Promotional Bar at the very top and the main header area. This is often used for utility menu items -- items that power users need right away like "Login".
  • Background Color: This sets the background color of the entire area between the promotional bar and the main header area. The background color will go from the left of the browser to the right.
  • Utility Menu
    • Background Color: This sets the background color and opacity of the area directly around the utility menu items.
    • Border Radius: This sets the curve of the corners of the area directly around the utility menu items.
    • Font Settings: Family, Size, Color, Weight
    • Text Transform: This sets the capitalization style for the font above.
    • Line Height: This sets the line height for the font above.
    • Letter Spacing: This sets the space between the characters for the font above.
    • Link Hover Color

• Main Header Area

  • This is the area below the admin/utility bar and contains your site logo, main menu and main call-to-action.
  • Main Header Area: Background Color: This sets the background color of the main header area when the page-level setting for "Header Design" is set to "Solid".
    • First Level Menu Items
      • Font Settings: Family, Size, Color, Weight, Text Decoration
      • Text Transform: This sets the capitalization style for the font above.
      • Line Height: This sets the line height for the font above.
      • Letter Spacing: This sets the space between the characters for the font above.
      • Hover Color: This sets the hover color of the main menu items when the page-level setting for "Header Design" is set to "Solid".
      • Hover Border Color: This sets the hover color of the border that shows under the main menu items when hovered and the page-level setting for "Header Design" is set to "Solid".
    • Mega Menu: These are settings specific to Mega Menus only.
      • Column Header Labels
        • Font Settings: Family, Size, Color, Weight, Text Decoration
        • Text Transform: This sets the capitalization style for the font above.
        • Line Height: This sets the line height for the font above.
        • Letter Spacing: This sets the space between the characters for the font above.
        • Border Color: This sets the border color of Column Headers.
        • Link Hover Color: This sets the border color of Column Headers.
      • Bottom Call-To-Action Area
        
        • Background Color: This sets the background color of call-to-action area at the bottom of mega menus.
        • Border Radius: This sets the curve of the corners of the call-to-action area at the bottom of mega menus.
        • Header Font Settings: Family, Size, Color, Weight, Text Decoration
        • Header Text Transform: This sets the capitalization style for the font above.
        • Header Line Height: This sets the line height for the font above.
        • Header Letter Spacing: This sets the space between the characters for the font above.
        • Button Background Color: This will control the background color of the button in the mega menu's Call-To-Action Area whether the "Solid" or "Transparent" options are engaged.
        • Button Text Color: This will control the text color of the button in the mega menu's Call-To-Action Area whether the "Solid" or "Transparent" options are engaged.
        • Button Background Hover Color: This will control the hover color of the button's background in the mega menu's Call-To-Action Area whether the "Solid" or "Transparent" options are engaged.
        • Button Text Hover Color: This will control the hover color of the button text in the mega menu's Call-To-Action Area whether the "Solid" or "Transparent" options are engaged.
  • Search Icon: Color: This sets the color of the main header search icon when the page-level setting for "Header Design" is set to "Solid".
  • Search Icon: Hover Color: This sets the color of the main header search icon when the page-level setting for "Header Design" is set to "Solid" and it is hovered
  • Language Switcher: Icon Color: This sets the color of the main header language switcher icon when the page-level setting for "Header Design" is set to "Solid".
  • Language Switcher: Icon Hover Color: This sets the color of the main header language switcher icon when the page-level setting for "Header Design" is set to "Solid" and it is hovered
  • Main Header Call-To-Action/Button
    • Background Color: This will control the background color of the main call-to-action button in the main menu when the "Transparent" option is engaged.
    • Font Color: This will control the font color of the main call-to-action in the main menu when the "Transparent" option is engaged.
    • Background Hover Color: This will control the background color of the main call-to-action in the main menu when the "Transparent" option is engaged.
    • Text Hover Color: This will control the font color of the main call-to-action in the main menu when the "Transparent" option is engaged.

• Mobile Navigation

  • Colors
    • Menu Trigger Color: This sets the color of the menu trigger (hamburger menu) that engages the mobile navigation.
    • Background Color: This sets the background color of mobile navigation panel that comes down when the trigger is engaged.
    • Border Color: This sets the border color between items in the mobile navigation panel.
    • Hover Color: This sets the hover color of all items that engage the hover state. This is mostly in case the mobile menu is engaged on a desktop device where a browser has been re-sized past the tablet breakpoint.
  • First Level Menu Items
    • Font Settings: Family, Size, Color, Weight, Text Decoration
    • Text Transform: This sets the capitalization style for the font above.
    • Line Height: This sets the line height for the font above.
    • Letter Spacing: This sets the space between the characters for the font above.
  • Child Menu Items
    • Font Settings: Family, Size, Color, Weight, Text Decoration
    • Text Transform: This sets the capitalization style for the font above.
    • Line Height: This sets the line height for the font above.
    • Letter Spacing: This sets the space between the characters for the font above.
  • Back Labels
    • Font Settings: Family, Size, Color, Weight, Text Decoration)
    • Text Transform: This sets the capitalization style for the font above.
    • Line Height: This sets the line height for the font above.
    • Letter Spacing: This sets the space between the characters for the font above.

There are on-page controls to make the header transparent for the page being viewed. This will control the appearance of the header items should that control be changed to "Transparent". Consider the options in this group as overrides to the "Default/Solid Header" vs. a whole new set of configuration options.

Admin/Top Bar (Overrides)

This is the area between the Hello/Promotional Bar at the very top and the main header area. This is often used for utility menu items -- items that power users need right away like "Login".

• Background Color: This will control the background color of the entire bar above the logo / main menu area.
• Utility Menu
  • Background Color: This sets the background color and opacity of the area directly around the utlity menu items.
  • Border/Corner Radius: This will add a radius/curve to the area directly around your utility menu.
  • Font Settings: Family, Size, Color, Weight
  • Text Transform: This sets the capitalization style for the font above.
  • Line Height: This sets the line height for the font above.
  • Letter Spacing: This sets the space between the characters for the font above.
  • Link Hover Color

Header Main (Overrides)

• Transparent Header Divider Color: This will control the color of the line that outputs directly under the main header when the "Transparent" option is engaged. To hide it completely, change the opacity to 0.
• First Level Menu Item: Font Color Override: This will control the color of the first level menu items (those visible before you hover over anything) when the "Transparent" option is engaged.
• First Level Menu Item: Link Hover Color Override: This will control the hover color of the first level menu items when the "Transparent" option is engaged.
• Search Icon: Color: This will control the color of the search icon in the main menu when the "Transparent" option is engaged.
• Search Icon: Hover Color: This will control the color of the search icon in the main menu when the "Transparent" option is engaged.
• Language Switcher: Icon Color: This sets the color of the main header language switcher icon when the page-level setting for "Header Design" is set to "Transparent".
• Language Switcher: Icon Hover Color: This sets the color of the main header language switcher icon when the page-level setting for "Header Design" is set to "Transparent" and it is hovered
• Main CTA: Background Color: This will control the background color of the main call-to-action in the main menu when the "Transparent" option is engaged.
• Main CTA: Font Color: This will control the font color of the main call-to-action in the main menu when the "Transparent" option is engaged.
• Main CTA: Background Hover Color: This will control the background color of the main call-to-action in the main menu when the "Transparent" option is engaged.
• Main CTA: Text Hover Color: This will control the font color of the main call-to-action in the main menu when the "Transparent" option is engaged.

The sticky behavior of the header requires a spacer called the header anchor. The height of the anchor varies depending on the height of logos and their orientation and whether the hello bar is enabled. The settings inside set the heights for the spacer for all situations and are designed to avoid CLS (a metric that affects pagespeed scores).

Default Header Anchor Height

This is the value to use for the header anchor height when the header hello bar is not in use. Change this value until there is no gap between the first module rendered and the bottom of the header. Using the inspector is the easiest way to determine the height of the header.

Header Anchor: Height with Hello Bar Active

This is the value to use for the header anchor height when the header hello bar is in use. Change this value until there is no gap between the first module rendered and the bottom of the header. Using the inspector is the easiest way to determine the height of the header.

Header Anchor: Height When There's No Navigation (Landing Pages)

This is the value to use for the header anchor height when there is no navigation (usually the case for landing pages). Change this value until there is no gap between the first module rendered and the bottom of the header. Using the inspector is the easiest way to determine the height of the header.

Header Anchor: Height When There's No Navigation But the Hello Bar is Active (Landing Pages)

This is the value to use for the header anchor height when there is no navigation (usually the case for landing pages) but the hello bar is active. Change this value until there is no gap between the first module rendered and the bottom of the header. Using the inspector is the easiest way to determine the height of the header.

Header Anchor: Responsive Height

Engaged when the mobile nav is engaged as users size down their browser

This is the value to use for the header anchor height when the header hello bar is not in use and the browser has entered the responsive breakpoint where the mobile navigation is shown. Change this value until there is no gap between the first module rendered and the bottom of the header. Using the inspector is the easiest way to determine the height of the header.

Header Anchor: Responsive Height with Hello Bar Active

Engaged when the mobile nav is engaged as users size down their browser

This is the value to use for the header anchor height when the header hello bar is not in use and the browser has entered the responsive breakpoint where the mobile navigation is shown. Change this value until there is no gap between the first module rendered and the bottom of the header. Using the inspector is the easiest way to determine the height of the header.

This will control the main site footer and copyright section styles.

Main Area

• Background Color: This sets the background color of the site footer.
• Rich Text Items
  • Font Settings: Family, Size, Color, Weight
  • Line Height: This sets the line height for the font above.
  • Hover Color: This sets the hover color of any links inside rich text areas in your footer.
  • Hover Text Decoration
• Column Headers
  • Font Settings: Family, Size, Color, Weight
  • Text Transform: This sets the capitalization style for the font above.
  • Line Height: This sets the line height for the font above.
  • Letter Spacing: This sets the space between the characters for the font above.
  • Border Color: This sets the border color of any links inside rich text areas in your footer.
  • Hover Color: This sets the hover color of column headers if a url has been configured for it in the footer.
  • Hover Text Decoration: This sets whether a line should appear when you hover over the column headers when hovered.
• Column Menu Items
  • Font Settings: Family, Size, Color, Weight
  • Text Transform: This sets the capitalization style for the font above.
  • Line Height: This sets the line height for the font above.
  • Letter Spacing: This sets the space between the characters for the font above.
  • Border Color: This sets the border color of any links inside rich text areas in your footer.
  • Text Hover Color: This sets the hover color of column headers if a url has been configured for it in the footer.
  • Border Hover Color: This sets the hover color of the bottom border for your column child menu items. (Set opacity to 0 to disable border on hover)

Copyright Section

• Background Color: This sets the background color of the site copyright bar under the footer.
• Border Color: This sets the divider color of the site copyright bar under the footer. (Set opacity to 0 to disable the divider line between the main footer and the copyright area.)
• Font Settings: Family, Size, Color, Weight
• Testimonial Star Color: This sets the color of the stars in the middle testimonial of the site copyright bar under the footer.
• Link Color: This sets the color of the links inside the copyright area under the footer.
• Link Hover Color: This sets the hover color for links inside copyright area under the footer.
• Text Decoration: Text Hover Decoration
  

Below are the settings that control the popover global search when the search icon is clicked in the main menu.

Body Overlay Color

This sets the color of the overlay that shows under the search form after you've clicked the search icon.

Input: Font Settings: Family, Size, Color, Weight, Text Decoration

Input: Border Radius

Use this control to set the corner/border radius for the search input inside the search popover for the entire site.

Below are the settings for your breadcrumbs including typography overrides specific to those.

Typography

• Font Settings: Family, Size, Weight
• Text Transform: This sets the capitalization style for the font above.
• Letter Spacing: This sets the space between the characters for the font above.
• Hover
  • Breadcrumb: Default Hover Color: This sets the color of the font when you hover over the breadcrumb.
  • Breadcrumb: White Hover Color: This sets the color of the font when you hover over the breadcrumb

Below are the settings for your blog including typography overrides specific to the blog.

Single Post: Typography

Below are the settings to override the typography for the blog: H1, H2, H3, H4, H5, H6. These inherit the fonts specified in the typography section.

• Heading One (H1)
• Here you can override the default Primary font settings specified in the Fonts section one level back.
  • Font Settings: Family, Size, Color, Weight, Text Decoration
  • Text Transform: This sets the capitalization style for the font above.
  • Line Height: This sets the line height for the font above.
  • Letter Spacing: This sets the space between the characters for the font above.
  • Mobile Responsive: Here you can control the values used for smaller/hand-held devices.
    • Font Settings: Size
    • Line Height: This sets the line height for the font above.
• Heading Two (H2)
• Here you can override the default Primary font settings specified in the Fonts section one level back.
  • Font Settings: Family, Size, Color, Weight, Text Decoration
  • Text Transform: This sets the capitalization style for the font above.
  • Line Height: This sets the line height for the font above.
  • Letter Spacing: This sets the space between the characters for the font above.
  • Mobile Responsive: Here you can control the values used for smaller/hand-held devices.
    • Font Settings: Size
    • Line Height: This sets the line height for the font above.
• Heading Three (H3)
• Here you can override the default Primary font settings specified in the Fonts section one level back.
  • Font Settings: Family, Size, Color, Weight, Text Decoration
  • Text Transform: This sets the capitalization style for the font above.
  • Line Height: This sets the line height for the font above.
  • Letter Spacing: This sets the space between the characters for the font above.
  • Mobile Responsive: Here you can control the values used for smaller/hand-held devices.
    • Font Settings: Size
    • Line Height: This sets the line height for the font above.
• Heading Four (H4)
• Here you can override the default Primary font settings specified in the Fonts section one level back.
  • Font Settings: Family, Size, Color, Weight, Text Decoration
  • Text Transform: This sets the capitalization style for the font above.
  • Line Height: This sets the line height for the font above.
  • Letter Spacing: This sets the space between the characters for the font above.
  • Mobile Responsive: Here you can control the values used for smaller/hand-held devices.
    • Font Settings: Size
    • Line Height: This sets the line height for the font above.
• Heading Five (H5)
• Here you can override the default Primary font settings specified in the Fonts section one level back.
  • Font Settings: Family, Size, Color, Weight, Text Decoration
  • Text Transform: This sets the capitalization style for the font above.
  • Line Height: This sets the line height for the font above.
  • Letter Spacing: This sets the space between the characters for the font above.
  • Mobile Responsive: Here you can control the values used for smaller/hand-held devices.
    • Font Settings: Size
    • Line Height: This sets the line height for the font above.
• Heading Six (H6)
• Here you can override the default Primary font settings specified in the Fonts section one level back.
  • Font Settings: Family, Size, Color, Weight, Text Decoration
  • Text Transform: This sets the capitalization style for the font above.
  • Line Height: This sets the line height for the font above.
  • Letter Spacing: This sets the space between the characters for the font above.
  • Mobile Responsive: Here you can control the values used for smaller/hand-held devices.
    • Font Settings: Size
    • Line Height: This sets the line height for the font above.
• Body Font (P)
• Here you can override the default Secondary font settings specified in the Fonts section one level back.
  • Font Settings: Family, Size, Color, Weight, Text Decoration
  • Text Transform: This sets the capitalization style for the font above.
  • Line Height: This sets the line height for the font above.
  • Letter Spacing: This sets the space between the characters for the font above.
  • Mobile Responsive: Here you can control the values used for smaller/hand-held devices.
    • Font Settings: Size
    • Line Height: This sets the line height for the font above.
• Body Links (A)
• Use the controls directly below to set the initial state for the links contained in your body copy. The accordion marked "Hover" will control the hover state. Some fields are omitted from the hover state controls to observe best practices.
  • Font Settings: Family, Size, Color, Weight, Text Decoration
  • Text Transform: This sets the capitalization style for the font above.
  • Line Height: This sets the line height for the font above.
  • Letter Spacing: This sets the space between the characters for the font above.
  • Hover State:
    • Font Settings: Color, Weight, Text Decoration
  • Mobile Responsive: Here you can control the values used for smaller/hand-held devices.
    • Font Settings: Size
    • Line Height: This sets the line height for the font above.

Single Post: Miscellaneous

Below are the settings specifically for individual posts.

• Post: Tags
• Below are the settings for the post tags just above the share-this block in the individual posts.
  • Post: Tag Background Color: This is the background color for the area directly around the tag text.
  • Post: Tag Hover Background Color: This is the background color for the area directly around your tag text when it is hovered.
  • Post: Tag Text Color: This is the color of the text for your tags.
  • Post: Tag Hover Text Color: This is the text color for your tags text when they are hovered.

Each of the following represents a choice inside the spacing dropdown within the module controls "Styles Tab > Spacing”

• Vertical Spacing (Extra Small)
• Vertical Spacing (Small)
• Vertical Spacing (Medium)
• Vertical Spacing (Large)
• Vertical Spacing (Extra Large)

Below are miscellaneous settings for things like your default border radius, default box shadow and hover shadow, etc.

Default Border Radius

This is the border radius (sometimes called corner radius) for items like cards, image and video containers, dropdown menus, form containers, etc.

Default Box Shadow

Below are the settings to fully control your default box shadow. The best way to test these is to preview your changes on a page with a cards module on it.

• Horizontal Offset: This sets the amount of pixels to the right or left of the main element where your box shadow will end.
• Vertical Offset: This sets the amount of pixels to the top or bottom of the main element where your box shadow will end.
• Blur Amount: This sets the amount of blur you'd like to apply to the box shadow. The higher the number the more blurry it will be which might make it too subtle.
• Spread Amount: This sets the amount of spread you'd like to apply to the box shadow. The higher the number the wider the spread out from the edge of the element.
• Shadow Color & Opacity: For a very dark and obvious color, you might choose black, but for something a bit more subtle you might go with a medium grey, for example.

Default Box Hover Shadow

Below are the settings to fully control your default hover box shadow. The best way to test these is to preview your changes on a page with a cards module on it.

• Horizontal Offset: This sets the amount of pixels to the right or left of the main element where your box shadow will end.
• Vertical Offset: This sets the amount of pixels to the top or bottom of the main element where your box shadow will end.
• Blur Amount: This sets the amount of blur you'd like to apply to the box shadow. The higher the number the more blurry it will be which might make it too subtle.
• Spread Amount: This sets the amount of spread you'd like to apply to the box shadow. The higher the number the wider the spread out from the edge of the element.
• Shadow Color & Opacity: For a very dark and obvious color, you might choose black, but for something a bit more subtle you might go with a medium grey, for example.

Sliders

Below are the settings to control the UI elements for sliders. The best way to test these is to preview your changes on a page with a testimonial or logo slider module on it.

• Arrow Static Color: This will set the static color for your slider arrows.
  
• Arrow Hover Color: This will set the color for your slider arrows when they are hovered.
  
• Dark Background: Arrow Static Color - COMING SOON: This will set the static color for your slider arrows when using a dark background and the text has been overridden to white.
• Dark Background: Arrow Hover Color - COMING SOON: This will set the color for your slider arrows when they are hovered while using a dark background and the text has been overridden to white.
• Dot Navigation: Static Color: This will set the static color for the slide navigation at the bottom of your site sliders (Bars that change color when the slider slides).
  
• Dot Navigation: Active Color: This will set the active and hover color for the slide navigation at the bottom of your site sliders (Bars that change color when the slider slides).
  
• Dark Background: Dot Navigation Static Color - COMING SOON:  This will set the static color for the slide navigation at the bottom of your site sliders (Bars that change color when the slider slides). This setting is used when the text color has been overridden to white.
• Dark Background: Dot Navigation Hover Color - COMING SOON:  This will set the active and hover color for the slide navigation at the bottom of your site sliders (Bars that change color when the slider slides). This setting is used when the text color has been overridden to white.
  

Accordions (COMING SOON)

Below are the settings to control styles related to accordions. For example: FAQs.

• Accordion Toggle Icon Color: This will set the color for the accordion toggle icons on the right.
• Accordion Divider Color: This will set the color for the dividers between accodion elements.
• Dark Background: Accordion Toggle Icon Color: This will set the color for the accordion toggle icons on the right when the text has been overriden to white in any accordion module.
• Dark Background: Accordion Divider Color: This will set the color for the dividers between accodion elements.

PreHeader Rule (Eyebrow)

Below are the settings to control the visibility and color of the PreHeader Rule (Eyebrow) that appears between your PreHeader and Header content. Note: this only shows when there is content in your PreHeader fields inside modules.

• Disable PreHeader Rule (Eyebrow) Globally
• PreHeader Rule (Eyebrow) Color: This will set the color for the PreHeader Rule (Eyebrow) that shows when there is content in your PreHeader fields inside modules.

Search Results Page

Below are settings for various styles on the search results page.

• Search Results: Highlight Color: This will set the color for the highlighted text inside each of the individual search results on the search results page.
• Search Results: Pagination Hover Color: This will set the hover color when a user hovers over the items in the page navigation (at the bottom).
• Search Results: Pagination Active Color: This will set the color of the active page in the page navigation (at the bottom).