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

This section describes how to upload a new theme.

Tip

You can create a new theme by copying an existing theme and then modifying it. For details, see Copying a 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.

Copying a theme

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

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

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

  3. Click |mi-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.

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.

Procedure. To preview content in different themes:
  1. In the header, click your username, and then click Profile. The Profile widget appears.

  2. Toward the right of the widget, select |mi-more_horiz| > Theme. A widget appears.

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

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

  5. Click Save.

Referring to the previous illustration, when working in the site Oxygen-Free Exercising, the editor previews content using the theme Falcon.

Applying a one-off theme to a site

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.

Procedure. To apply a one-off theme to a site:
  1. From the Navigation Menu, expand Admin, and select 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 |mi-add_circle_outline|. A form appears.

  6. Select a locale and localization items. For details, see Customizing Brightspot's labels.

  7. Click Save.

  8. Under Color Palette, select the colors available with this theme.

  9. Click Save.

Applying a shared theme to a site

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 Watermelon with the site Neanderthal Cooking, visitors to the site Neanderthal Cooking see content rendered with the theme Watermelon.

Procedure. To apply a shared theme to a site:
  1. From the Navigation Menu, expand Admin, and select 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.

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, expand Admin, and 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 Applying a shared theme to a site.