Customizing a theme

Q: Styling elements, fonts

Style element 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 .

Q: Styling elements, layout and button shape

Style element Description Default Article Lead Style The layout of an article's lead. Standard —Width of lead module is its natural size. 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 and styling elements you can override.

Customizing a theme

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.
To localize or reword various text elements, such as form-field labels, under Overrides > Localization > Localization Bundles, and upload a bundle containing the customization.
Under Overrides, click Open Editor.
In the right rail, and using the table "Styling elements, colors" below as a reference, click a styling element and modify its color. As you modify a color, the preview pane updates.
- Styling elements with the value No Color have no override and inherit the theme bundle's color.
- To remove a color override and restore the theme's original color, click expand_more to open the color picker, click block, and then click OK.
  
  Removing a theme color's override
In the left rail, and using the table "Styling elements, fonts" below as a reference, click one of the categories or modules. The preview pane displays the category or module using your currently selected colors. For example—
1. In the right rail, change the Button Background Color to #05a072.
2. In the left rail, click Promos - Page > Promo Module A.
3. In the preview pane, note the appearance of the button.
  
  Theme editor, modified colors
To modify the palette of available colors, see Configuring a theme's swatch.
Click Save.

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.
To localize or reword various text elements, such as form-field labels, under Overrides > Localization > Localization Bundles, and upload a bundle containing the customization.
Under Overrides, click Open Editor.
In the right rail, and using the table "Styling elements, colors" below as a reference, click a styling element and modify its font. As you modify a font, the preview pane updates.
In the left rail, click one of the categories or modules. The preview pane displays the category or module using your currently selected fonts. For example—
1. In the right rail, change the Font 1 to Montserrat.
2. Click Save, and re-open the theme editor.
3. In the left rail, click Forms > Form.
4. In the preview pane, note the appearance of the text.
  
  Theme editor, modified fonts
Click Save.

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.
To localize or reword various text elements, such as form-field labels, under Overrides > Localization > Localization Bundles, and upload a bundle containing the customization.
Under Overrides, click Open Editor.
In the right rail, and using the table "Styling elements, layout and button shape" as a reference, click a styling element and modify its setting. As you modify the setting, the preview pane updates.
In the left rail, click one of the categories or modules. The preview pane displays the category or module using your current selection. For example—
1. In the right rail, change the Default Button Style to Pill.
2. In the left rail, click Forms > Form.
3. In the preview pane, note the button's shape.
  
  Theme editor, lead layout and button shape
Click Save.

Styling elements

Styling elements, colors

Style element	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.

Styling elements, fonts

Style element	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.

Styling elements, layout and button shape

Style element	Description
Default Article Lead Style	The layout of an article's lead. Standard—Width of lead module is its natural size. 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.

Previous Topic

Upgrading a theme

Next Topic

Changing the theme used in preview