Using Themes

Themes provide your site’s layout, color scheme, and behaviors. Themes decouple the deployment process: developers can make frontend changes (including changes to themes) independent of the backend. You can install your own theme into Brightspot.

You need to manually upload a theme only in certain circumstances, typically when the theme deployment process is integrated with Travis CI.

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

      ../../../_images/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.

      ../../../_images/theme-url.png
  6. Click Save.

Upgrading a Theme to 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 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.
    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 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.
    4. Skip to step 7.
  6. If the theme is a bundle already in Brightspot, do the following:

    1. From the Stable Release list, select Fixed. The Bundle selection field appears.

      ../../../_images/theme-bundle.png
    2. Click Bundle, and from the Content Picker select the required bundle.

  7. Click Save.

Tip

Brightspot delivers the theme’s upgrade as a CSS file that may already be in a browser’s cache. If users 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 upgraded theme.

  • In the Brightspot header, click the current theme’s link, and then select the preview theme.
../../../_images/change-theme-link.svg

Changing a site’s theme in this manner does not affect published content. Visitors to your site continue to see published content with the site’s theme.

Brightspot provides an indication of a site’s published and previewing theme.

../../../_images/previewing-theme.svg

Referring to the previous illustration, the site’s published theme is Eclipse, and the preview theme is Falcon.

See also:

Changing a Site’s Theme

You can associate a theme at the global and site levels. Any item appearing at or under that level inherits the theme’s settings. (For an illustration of the inheritance flow among different items, see the Content Hierarchy Diagram.)

  1. From the Navigation Menu, select Admin > Sites & Settings.

  2. In the Sites & Settings widget, do one of the following:

    1. To set a theme for all your sites, click Global.
    2. To set a theme for a single site, click the site. (For details about creating a new site, see Creating Sites).

    The Edit Global or Edit Site widget appears.

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

    ../../../_images/edit-site.png
  4. Click Save.

See also:

Testing Development Versions of a Theme

As you develop new versions of a theme, you can test them before actually installing 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. In the Versions widget, click New Version. The New Version widget appears.

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

    4. Click Save.

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

  3. Under Other Releases, do the following:

    1. Click Add Other Release. An Other Release form appears.

      ../../../_images/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. From the Users widget, select your user name. The Edit Tool User widget appears. (For information about creating a user name, see Creating Users.)

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

      ../../../_images/theme-user-version.png
    4. Click Save.

When viewing as your user an item that inherits the original theme, Brightspot applies the settings in the test version. Other users see the item using the original theme.

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.

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

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

  3. In the Overrides tab, make selections for the theme’s overrides. (The initial or default values in the Overrides tab are from the theme.)

    ../../../_images/global-theme-override.png

    If there is no Overrides tab, contact your Brightspot developer to add it.

  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.

../../../_images/theme-components.svg

See also:

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 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 associated with the site, Brightspot applies the overriding theme; for all other users, Brightspot applies the site’s theme.

  1. From the Navigation Menu, select Admin > Users & Roles.

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

  3. Under the Theme tab, click the Global Theme Override field, and from the content picker select a theme for the global site. When you view a content edit form or published page that inherits from the global site, Brightspot applies this theme.

  4. Under Site Theme Overrides, do the following:

    1. Click Add Site Theme Override. A Site Theme Override form appears.
    2. From the Site list, select the site whose theme you want to override.
    3. From the Theme list, select the theme to apply to the site.
    ../../../_images/theme-global-site-user-override.png
  5. Click Save.

See also:

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.

../../../_images/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 Frost; 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.

      ../../../_images/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.