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. 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 already uploaded to Brightspot, do the following:

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

      ../../../_images/theme-bundle.png
    2. From the selection field, select the required theme.

  7. Click Save.

Tip

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

  1. In the header, click your username. The Profile widget appears.

  2. Under Profile, click Theme.

    ../../../_images/user-theme-override.png
  3. From the Version list, select the version of the theme you want to use in the preview.

  4. From the Global Theme Override list, select the theme you want to use for preview.

  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.

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

  6. Click Save.

Referring to the previous illustrations:

  • The editor previews content using version 2.0 of the theme Eclipse.
  • When working in the site Oxygen-Free Exercising, the editor previews content using the theme Falcon.

See also:

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

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

  2. Under Sites, 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 Front-End, 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 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.

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

      ../../../_images/theme-user-version.png
    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.

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

    ../../../_images/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 add_circle_outline. A Site Theme Override form appears.

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

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.