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 鈥擶idth of lead module does not exceed the width of the asset's body. Large 鈥擶idth of lead module spans entire page. Overlay 鈥擯ositions the headline and subheadline over the lead module. Nested 鈥擭ests the headline underneath the lead. Full Width 鈥擶idth of lead module spans entire page. Default Button Style Shape of buttons. Square 鈥擝utton is a rectangle with square corners. Rounded 鈥擝utton is a rectangle with rounded corners, Pill 鈥擝utton is an ellipse.

番茄社区

Brightspot CMS User Guide

Admin

Site management

Theme management

Back to Theme management

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 .
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 .
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鈥擶idth of lead module does not exceed the width of the asset's body. Large鈥擶idth of lead module spans entire page. Overlay鈥擯ositions the headline and subheadline over the lead module. Nested鈥擭ests the headline underneath the lead. Full Width鈥擶idth of lead module spans entire page.
Default Button Style	Shape of buttons. Square鈥擝utton is a rectangle with square corners. Rounded鈥擝utton is a rectangle with rounded corners, Pill鈥擝utton 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

Was this topic helpful?

Thanks for your feedback.

Our robust, flexible Design System provides hundreds of pre-built components you can use to build the presentation layer of your dreams.

鈥�
鈥�
鈥�

Content Types Guide

Brightspot is packaged with content types that get you up and running in a matter of days, including assets, modules and landing pages.

鈥� Content types
鈥� Modules
鈥� Landing pages

CMS User Guide

Everything you need to know when creating, managing, and administering content within Brightspot CMS.

鈥� Dashboards
鈥� Publishing
鈥� Workflows
鈥� Admin configurations

Developer Guide

A guide for installing, supporting, extending, modifying and administering code on the Brightspot platform.

鈥� Field types
鈥� Content modeling
鈥� Rich-text elements
鈥� Images

Integrations Guide

A guide to configuring Brightspot's library of integrations, including pre-built options and developer-configured extensions.

鈥� Google Analytics
鈥� Shopify
鈥� Apple News