Support and Documentation

Using themes

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

Uploading a new theme
Procedure. To upload a new theme:
  1. From the Navigation Menu, select Admin > Themes.

  2. In the Themes widget, click New Theme. The New Theme widget appears.

  3. In the Name field, type a name for the theme.

  4. If the theme is in a compressed file (such as a .zip file) on your computer, do the following (otherwise skip to step 5):

    1. From the Stable Release list, select New File.

    2. From the File list, select New Upload, and then click Choose.

    3. Navigate to the theme file on your computer.

      theme-local.png
    4. Skip to step 6.

  5. If the theme is in a compressed file (such as a .zip file) on the Internet, do the following:

    1. From the Stable Release list, select New File.

    2. From the File list, select New URL.

    3. In the text box, paste the URL for the theme file.

      theme-url.png
  6. Click Save.

Upgrading a theme to new release
Procedure. To upgrade a theme to a new release:
  1. From the Navigation Menu, select Admin > Themes.

  2. In the Themes widget, click the theme you want to update. The Edit Theme widget appears.

  3. (Optional) In the Name field, type a new name for the theme.

  4. If the upgrade is in a compressed file (such as a .zip file) on your computer, do the following (otherwise skip to step 5):

    1. From the Bundle list, select New File.

    2. Select New Upload, and then click Choose.

    3. Navigate to the theme file on your computer.

    4. Skip to step 7.

  5. If the upgrade is in a compressed file (such as a .zip file) on the Internet, do the following (otherwise skip to step 6):

    1. From the Bundle list, select New File, then select New URL.

    2. In the text box, paste the URL for the theme file.

    3. Skip to step 7.

  6. If the theme is already uploaded to Brightspot, do the following:

    1. From the Bundle list, select Existing. A selection field appears.

    2. From the selection field, select the required theme.

  7. Click Save.

Note

Brightspot delivers the theme's upgrade as a CSS file that may already be in a browser's cache. If visitors don't see the upgrade, advise them to clear their browser's cache.

Previewing content in different themes

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

Note

Changing your preview theme does not affect published content. Visitors to your site continue to see published content with the site's theme.

Changing a site's theme

You can associate a theme at the global and site levels, and Brightspot publishes content using those themes. Any item appearing at or under that level inherits the theme's settings. For example, if you associate the theme Watermelon with the site Neanderthal Cooking, visitors to the site Neanderthal Cooking see content rendered with the theme Watermelon. (For an illustration of the inheritance flow among different items, see the Content hierarchy diagram.)

Procedure. To change a site's theme:
  1. From the Navigation Menu, select Sites & Settings.

  2. Under Sites, select the site whose theme you want to change, or select Global to change the theme for all sites. The Edit Site or Edit Global widget appears.

  3. Under Front-End, from the Theme list, select the required theme.

  4. Click Save.

Testing development versions of a theme

As you develop new versions of a theme, you can test them before actually deploying them in a production environment.

  1. Create a label for the test version by doing the following (if you already have a version label, skip to step 2):

    1. From the Navigation Menu, select Admin > Themes.

    2. Under Versions, click New Version. The New Version widget appears.

      theme-version.png
    3. In the Name field, type a label for the test version.

    4. Click Save.

  2. Under Themes, click the theme for which you want to install a test version. The Edit Theme widget appears.

  3. Under Main, under Other Releases, do the following:

    1. Click |mi-add_circle_outline|. An Other Release form appears.

      theme-other-releases.png
    2. From the Version list, select a version label.

    3. Upload or install the test version by following steps 4–6 in Upgrading a theme to new release.

  4. Click Save.

  5. Activate the test version by doing the following:

    1. From the Navigation Menu, select 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 users.)

    3. Under Theme, click Version, and select the test version.

    4. From the Global Theme Override list, select the theme.

    5. Click Save.

When previewing an item that inherits the selected theme, Brightspot applies the settings in the theme's test version.

For information about overriding a preview theme at the site level, see Overriding themes at the user level.

Configuring themes at the global level

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

Procedure. To configure a global theme:
  1. From the Navigation Menu, select Admin > Themes.

  2. Under Themes, click the theme to which you want to apply overrides.

  3. Toward the right of the widget, select |mi-more_horiz| > Overrides. A widget appears.

  4. Make selections for the theme's overrides. (The initial or default values in the Overrides tab are from the theme.)

  5. 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.

theme-components.svg
Configuring a theme's swatch

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

color-swatch.svg

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

Procedure. To configure a swatch:
  1. From the Navigation Menu, select Admin > Themes.

  2. Under Themes, click the theme for which you want to configure a swatch.

  3. Toward the right of the widget, select |mi-more_horiz| > Color Palette. A widget appears.

  4. Open the color picker for Color 1.

  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.

Overriding themes at the user level

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.

Procedure. To configure a user's theme:
  1. From the Navigation Menu, select Users & Roles.

  2. Under Users, select your user name. The Edit Tool User widget appears. (For information about creating a user name, see Creating users.)

  3. Click Theme.

  4. From the Version list, select the theme's version you want to use.

  5. From the Global Theme Override list, select the theme.

    theme-user-version.png
  6. If you want to use a different theme for different sites, do the following:

    1. Under Site Theme Overrides, click |mi-add_circle_outline|. A Site Theme Override form appears.

      user-site-theme-override.png
    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.

  7. Click Save.

Using theme variations

The section Configuring themes at the global level describes how to make changes to a theme. You can use this feature to create variations of themes, and apply those variations to your sites.

Suppose you publish six sites, three of them for pessimists and three of them for optimists.

theme-variations.svg

In the previous illustration, the pessimists' headlines are all set in red with a border, and the optimists' headlines are all set in blue without a border. This scenario is ideal for using theme variations: all six sites use the base theme Falcon; three of the sites have the same appearance (red headlines), the other three have a different appearance (blue headlines).

The following steps provide an overview of how to create and use theme variations.

  1. Create theme variations:

    1. Upload a new theme as described in Uploading a new theme. In the Name field, type a name for the theme. As a best practice, include the theme's base name and an indication of the variation.

      theme-variation.png
    2. Again upload a new theme. In the Name field, type a different name for the theme.

  2. Apply changes to each theme as described in Configuring themes at the global level.

  3. Assign each theme variation to your sites as described in Changing a site's theme.