番茄社区

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:
  1. Click menu > Admin > Themes.
  2. Under Themes, click the theme to which you want to apply overrides.
  3. Under Overrides, expand Localization.
  4. 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.
  5. Click Save.
FieldDescription
Primary ColorDefault 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 ColorDefault 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 ColorTimestamps in live blog posts, background color for disabled selection, and checkbox form fields.
Text Color InverseColor of some text elements, such as within page headings.
Site Background ColorBackground color the asset and layout modules.
Border ColorColor of some borders, such as above a copyright date.
Callout Background ColorBackground color for lists of authors and attachments.
Header Background ColorBackground color for the header.
Header Secondary Background ColorBackground color of search field.
Header Border ColorsBorder under search field.
Header Text ColorColor of text in header.
Hat Background ColorBackground color for the hat.
Hat Text ColorColor of text in hat.
Banner BackgroundBackground color of some banners.
Banner Text ColorColor of text in some banners.
Footer Background ColorBackground color for the footer.
Footer Text ColorColor of text in footer.
Link ColorColor of text in some hyperlinks, such as for file downloads.
Link Hover ColorColor of text as mouse hovers over some hyperlinks, such as for file downloads.
Button Background ColorBackground color for buttons.
Button Border ColorColor of border around a button.
Button Text ColorColor of text inside a button.
Button Hover Background ColorBackground color as mouse hovers over a button.
Button Hover Border ColorBorder color as mouse hovers over a button.
Button Hover Text ColorText color as mouse hovers over a button.
List Title ColorText color for the title of some lists.
List Border ColorBorder color for some lists.
Category/Eyebrow Text ColorNot used.
Sponsor Banner Background ColorSponsor banner's background color.
Sponsor Banner Text ColorColor of text in sponsor banner.

Customizing a theme's fonts
To customize a theme's fonts:
  1. Click menu > Admin > Themes.
  2. Under Themes, click the theme to which you want to apply overrides.
  3. Under Overrides, expand Localization.
  4. Using the following table as a reference, complete the fields as needed.
  5. Click Save.
FieldDescription
Font 1Typeface 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 2Typeface 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 FontFont 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 FontFont for list titles. Only the fonts set in the Font 1 and Font 2 fields above are available.
Promo Title FontFont for promo titles. Only the fonts set in the Font 1 and Font 2 fields above are available.
Description FontFont for promo descriptions. Only the fonts set in the Font 1 and Font 2 fields above are available.
Quote FontFont 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:
  1. Click menu > Admin > Themes.
  2. Under Themes, click the theme to which you want to apply overrides.
  3. Under Overrides, expand Localization.
  4. Using the following table as a reference, complete the fields as needed.
  5. Click Save.
FieldDescription
Default Article Lead StyleThe 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 StyleShape 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:
  1. Click menu > Admin > Themes.
  2. Under Themes, click the theme to which you want to apply overrides.
  3. Under Overrides, under Localization Bundles, click add_circle_outline to add a localization bundle.
  4. Select a locale from the Locale list.
  5. 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.
  6. Click Save.

Tags
Themes
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