Theme management

Brightspot separates content (text, images, videos) from presentation (how the content appears in a web page). You use the content edit form to manage content, and you use themes to manage the content’s appearance. The following sections describe the various aspects of a theme.

Page layout

A page layout specifies which elements are rendered in the web page and in which order.

Styling
Styling specifies the color scheme, typeface, and general spacing between elements. Brightspot applies styling through traditional CSS files. The following are examples of styling that are almost the opposite of each other: one with black-on-white, the other with white-on-black.

Behavior
Web pages have a variety of behaviors, such as animation and data validation. The following animation shows a behavior that launches after a visitor clicks on the search icon:

• Exposes a search field.
• Places the cursor inside the search field (so visitors do not need to click into the field).

Behaviors are typically implemented using JavaScript.

Themes provide your site’s layout, color scheme, and behaviors. You can install your own themes, and versions of individual themes, into Brightspot.

This section describes how to upload a new theme.

To upload a theme:

1. Click menu > Admin > Themes > New Theme. The New Theme widget appears.
2. In the Name field, type a name for the theme.
3. From the ​Bundle​ list, select ​New File​.
4. Select ​New Upload​, and then click ​Choose​.
5. Navigate to the theme file on your computer.
6. Click Save.

You can create a new theme by copying an existing theme and then modifying it.

To copy a theme:

1. Click menu > Admin > Themes.
2. In the Themes widget, click the theme you want to copy. The Edit Theme widget appears.
3. Click settings, and select Copy This Theme. The New Theme widget appears.
4. In the Name field, type a name for the theme.
5. Update the other fields as necessary.
6. Click Save.

To install an updated version of a theme:

1. Click menu > Admin > Themes.
2. In the ​Themes​ widget, select the theme for which you want to install an updated version. The ​Edit Theme​ widget appears.
3. (Optional) In the ​Name​ field, enter a new name for the theme.
4. From the ​Bundle​ list, select ​New File​.
5. Select ​New Upload​, and then click ​Choose​.
6. Navigate to the theme file on your computer.

You can preview content using different themes. This feature is useful for testing how content appears in a new or an upgraded theme.

To preview content in different themes:

1. In the header, click your username > Profile. The Profile widget appears.
2. Under the CMS tab, find the Global Theme Override list, then select the theme you want to use for the preview.
3. If you want to use a different theme for different sites, do the following:
   
   1. Under Site Theme Overrides, click add_circle_outline. A Site Theme Override form appears.
   2. From the Site list, select the site for which you want to apply a theme override.
   3. From the Theme list, select the theme you want to use for the site.
4. Click Save.

You can associate a one-off theme at the global and site levels. Using this technique, you can start with an existing theme and then customize individual components, such as text color or localization. For example, if the only difference between one site and another is the text color, you can leverage an existing theme to create a one-off theme for the second site and then change the text color.

You can apply a shared theme at the global and site levels, and Brightspot publishes content using that theme. Any item appearing on the site inherits the theme’s settings. For example, if you associate the theme Frost with the site Brightspot, visitors to the site Brightspot see content rendered with the theme Frost.

To apply a one-off theme to a site:

1. Click menu > Admin > Sites & Settings.
2. Under Sites, select the site to which you want to apply a theme, or select Global to apply the theme to all sites. The Edit Site or Edit Global widget appears.
3. Under Main, from the Theme list, select One-Off. A form appears.
4. Under Main, do the following:
   
   1. In the Field Prefix field, enter a prefix that applies the override to other themes. Other themes with this prefix inherit the settings you make for this theme.
   2. Under Bundle, do one of the following:
      
      • Select Existing, and select an existing theme bundle.
      • Select New File, and upload a new theme bundle or provide a URL to an existing one.
5. Under Overrides, under Localization, click add_circle_outline. A form appears.
6. Select a locale and localization items.
7. Click Save.
8. Under Color Palette, select the colors available with this theme.
9. Click Save.

To apply a shared theme to a site:

1. Click menu > Admin > Sites & Settings.
2. Under Sites, select the site to which you want to apply a theme, or select Global to apply the theme to all sites. The Edit Site or Edit Global widget appears.
3. Under Main, from the Theme list, select Shared.
4. From the drop-down list, select the required theme.
5. Click Save.

When you install a new or updated theme, you can override any of its settings, such as color and typeface.

To configure global theme overrides:

1. Click menu > Admin > Themes.
2. Under Themes, click the theme to which you want to apply overrides.
3. Under Overrides, make selections for the theme’s overrides. (The initial or default values in the Overrides tab are from the theme.)
4. Click Save.

Brightspot applies your overrides to published content.
The colors used for different components of a published page are very much at the theme designer’s discretion. The following illustration is an example of how some colors are used in Brightspot’s Falcon theme. Regardless, consult with your theme’s designer to determine which colors to override in your site’s published content.

In a production environment, you apply a theme at the global and site levels. For example, for the global site you can apply one theme, and for the individual sites you can apply other themes. In a testing environment, you can override a site’s theme at your user level. When you view an item that is associated with the site, Brightspot applies the overriding theme; for all other users, Brightspot applies the site’s theme.

To configure a user's theme:

1. Click menu > Admin > Users & Roles
2. Under Users, select your user name. The Edit Tool User widget appears. (For information about creating a user name, see Creating a user.)
3. Click the CMS tab > Advanced.
4. From the Global Theme Override list, select the theme.
   

   

5. If you want to use a different theme for different sites, do the following:
   
   1. Under Site Theme Overrides, click add_circle_outline. A Site Theme Override form appears.
      

      

   2. From the Site list, select the site for which you want to apply a theme override.
   3. From the Theme list, select the theme you want to use for the site.
6. Click Save.

Theme designers can provide a swatch of colors to promote a site’s branding. The swatch appears in the color picker.

Providing swatches makes it easy to select a site’s recommended colors.

To configure a swatch:

1. Click menu > Admin > Themes.
2. Under Themes, click the theme for which you want to configure a swatch.
3. Toward the right of the widget, click the Color Palette tab. A widget appears.
4. Open the color picker for Primary Color.
5. Select the color in the swatch by doing one of the following:
   
   • Select the hue and saturation.
   • Enter a hex color code.
6. Click OK.
7. Repeat steps 4–6 to select the swatch's remaining colors.
8. Click Save.

You can switch between different versions of a theme.

To use a different version of a theme:

1. Click menu > Admin > Themes.
2. In the Themes widget, click the theme whose version you want to change. The Edit Theme widget appears.
3. From the Bundle list, select Existing. A selection field appears.
4. From the selection field, select the required version.
5. Click Save.

All sites using the theme use the selected version.

You can associate a ​one-off​ theme at the global and site levels. Using this technique, you can start with an existing theme and then customize individual components, such as text color or localization. For example, if the only difference between one site and another is the text color, you can leverage an existing theme to create a one-off theme for the second site and then change the text color.

To apply a one-off theme to a site:

1. Click menu > Admin > Sites & Settings.
2. Under ​Sites​, select the site to which you want to apply a one-off theme, or select ​Global​ to apply the theme to all sites. The ​Edit Site​ or ​Edit Global​ widget appears.
3. Under ​Main > Theme​, select ​One-Off​. A form appears.
4. Under ​Main​, do the following:
   
   1. In the ​Field Prefix​ field, enter a prefix that applies the override to the one-off theme. Fields in the theme selected in the following step inherit the settings you make for this theme.
   2. Under ​Bundle​, do one of the following:
      
      • Select ​Existing​, and select an existing theme bundle.
      • Select ​New File​, and upload a new theme bundle.
5. Under ​Overrides​, under ​Localization​, click add_circle_outline. A form appears.
6. Select a ​locale​ and configure localization items.
7. Click Save.
8. Under ​Color Palette​, select the color overrides for this theme.
9. Click Save.