Customizing a theme
You can customize a theme's color scheme, fonts, and some layout elements to match your site's branding.
The following tables describe the available theme customizations.
Customizing a theme's colors
To customize a theme's colors:
- Click > Admin > Themes.
- Under Themes, click the theme to which you want to apply overrides.
- Under Overrides, expand Localization.
- Using the following table as a reference, complete the fields as needed. NoteStyling elements with the value No Color have no override and inherit the theme bundle's color.
- Click Save.
Field | Description |
Primary Color | Default color for most elements such as the hat's background color, color of underline when mouse hovers over a link, next/previous buttons for galleries, and buttons. Some of the following style elements override this setting. |
Primary Text Color | Default color for most text in an asset and its layout modules. Does not apply to text in hat, header, and footer. Some of the following style elements override this setting. |
Secondary Text Color | Timestamps in live blog posts, background color for disabled selection, and checkbox form fields. |
Text Color Inverse | Color of some text elements, such as within page headings. |
Site Background Color | Background color the asset and layout modules. |
Border Color | Color of some borders, such as above a copyright date. |
Callout Background Color | Background color for lists of authors and attachments. |
Header Background Color | Background color for the header. |
Header Secondary Background Color | Background color of search field. |
Header Border Colors | Border under search field. |
Header Text Color | Color of text in header. |
Hat Background Color | Background color for the hat. |
Hat Text Color | Color of text in hat. |
Banner Background | Background color of some banners. |
Banner Text Color | Color of text in some banners. |
Footer Background Color | Background color for the footer. |
Footer Text Color | Color of text in footer. |
Link Color | Color of text in some hyperlinks, such as for file downloads. |
Link Hover Color | Color of text as mouse hovers over some hyperlinks, such as for file downloads. |
Button Background Color | Background color for buttons. |
Button Border Color | Color of border around a button. |
Button Text Color | Color of text inside a button. |
Button Hover Background Color | Background color as mouse hovers over a button. |
Button Hover Border Color | Border color as mouse hovers over a button. |
Button Hover Text Color | Text color as mouse hovers over a button. |
List Title Color | Text color for the title of some lists. |
List Border Color | Border color for some lists. |
Category/Eyebrow Text Color | Not used. |
Sponsor Banner Background Color | Sponsor banner's background color. |
Sponsor Banner Text Color | Color of text in sponsor banner. |
Customizing a theme's fonts
To customize a theme's fonts:
- Click > Admin > Themes.
- Under Themes, click the theme to which you want to apply overrides.
- Under Overrides, expand Localization.
- Using the following table as a reference, complete the fields as needed.
- Click Save.
Field | Description |
Font 1 | Typeface for all text except quote and pull-quote modules. You can use any name of a Google web font, such as Roboto or Passions Conflict . For a list of Google fonts, see Google fonts. |
Font 2 | Typeface for quote and pull-quote modules. You can use any name of a Google web font, such as Roboto or Passions Conflict . For a list of Google fonts, see Google fonts. |
Page Title Font | Font for titles of assets, like articles, blog posts, and others. Only the fonts set in the Font 1 and Font 2 fields above are available. |
List Title Font | Font for list titles. Only the fonts set in the Font 1 and Font 2 fields above are available. |
Promo Title Font | Font for promo titles. Only the fonts set in the Font 1 and Font 2 fields above are available. |
Description Font | Font for promo descriptions. Only the fonts set in the Font 1 and Font 2 fields above are available. |
Quote Font | Font for text used in pull quote enhancements in the rich-text editor. Only the fonts set in the Font 1 and Font 2 fields above are available. |
Customizing a theme's lead layout and button shape
To customize a theme's lead layout and button shape:
- Click > Admin > Themes.
- Under Themes, click the theme to which you want to apply overrides.
- Under Overrides, expand Localization.
- Using the following table as a reference, complete the fields as needed.
- Click Save.
Field | Description |
Default Article Lead Style | The layout of an article's lead.
|
Default Button Style | Shape of buttons.
|
Adding a localization bundle
With localization bundles, you can localize or reword various text elements, such as form-field labels.
To add a localization bundle:
To add a localization bundle:
- Click > Admin > Themes.
- Under Themes, click the theme to which you want to apply overrides.
- Under Overrides, under Localization Bundles, click to add a localization bundle.
- Select a locale from the Locale list.
- Under Localizations, do the following:
- In the Name field, enter a name for the localization item.
- Under Entries, click , then enter a key-value pair to serve as the localization item.
- Click Save.