Brightspot CMS User Guide

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 and styling elements you can override.

Customizing a theme

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. To localize or reword various text elements, such as form-field labels, under Overrides > Localization > Localization Bundles, and upload a bundle containing the customization.
  4. Under Overrides, click Open Editor.
  5. 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.

      Remove theme color override
      Removing a theme color's override
  6. 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
      Theme editor, modified colors
  7. To modify the palette of available colors, see Configuring a theme's swatch.
  8. Click Save.

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. To localize or reword various text elements, such as form-field labels, under Overrides > Localization > Localization Bundles, and upload a bundle containing the customization.
  4. Under Overrides, click Open Editor.
  5. 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.
  6. 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
      Theme editor, modified fonts
  7. Click Save.

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. To localize or reword various text elements, such as form-field labels, under Overrides > Localization > Localization Bundles, and upload a bundle containing the customization.
  4. Under Overrides, click Open Editor.
  5. 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.
  6. 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
      Theme editor, lead layout and button shape
  7. Click Save.

Styling elements

Styling elements, colors





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

Styling elements, fonts



Style elementDescription
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 Google fonts.
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 Google fonts.

Styling elements, layout and button shape





Style elementDescription
Default Article Lead StyleThe 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 StyleShape 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
Was this topic helpful?
Thanks for your feedback.
The elements that get you up and running in a matter of days, from pre-built content types, to modules, to landing pages.

Content types
Modules
Landing pages
Everything you need to manage and administer content within Brightspot CMS, including plug-and-play integrations.

Dashboards
Publishing
Workflows
Admin configurations
A guide for installing, supporting and administering code on the Brightspot platform, including integrations requiring developer support to use.

Field types
Content modeling
Rich-text elements
Images