Customizing a theme

Q: Customizing a theme's lead layout and button shape

To customize a theme's lead layout and button shape : Click menu > 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. Standard —Width of lead module does not exceed the width of the asset's body. Large —Width of lead module spans entire page. Overlay —Positions the headline and subheadline over the lead module. Nested —Nests the headline underneath the lead. Full Width —Width of lead module spans entire page. Default Button Style Shape of buttons. Square —Button is a rectangle with square corners. Rounded —Button is a rectangle with rounded corners, Pill —Button is an ellipse.

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 menu > 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.

Note

Styling 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 menu > 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 menu > 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. Standard—Width of lead module does not exceed the width of the asset's body. Large—Width of lead module spans entire page. Overlay—Positions the headline and subheadline over the lead module. Nested—Nests the headline underneath the lead. Full Width—Width of lead module spans entire page.
Default Button Style	Shape of buttons. Square—Button is a rectangle with square corners. Rounded—Button is a rectangle with rounded corners, Pill—Button is an ellipse.

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:

Click menu > Admin > Themes.
Under Themes, click the theme to which you want to apply overrides.
Under Overrides, under Localization Bundles, click add_circle_outline to add a localization bundle.
Select a locale from the Locale list.
Under Localizations, do the following:
1. In the Name field, enter a name for the localization item.
2. Under Entries, click add_circle_outline, then enter a key-value pair to serve as the localization item.
Click Save.

Previous Topic

Upgrading a theme

Next Topic

Changing the theme used in preview