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.

Changing to a Different Theme

You can temporarily change the current site to a different theme. This feature is useful for testing an upgrade to a theme. (To permanently change a site’s theme, see Changing a Site’s Theme.)

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

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.

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.

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: