Creating Custom Themes for In-Page Experiences

Product(s)
Gallery
Role(s)
Studio User
Task(s)
Create an In-Page Experience
Topic(s)
Styling

In this topic you will learn how to create custom themes for use in Gallery in-page experiences.

Themes provide a pre-defined set of colors and fonts which can be used to quickly style in-page experiences. Gallery provides a set of default themes but you can also create your own, custom themes. Any custom themes that are created are shared across a Video Cloud account. Once a theme is applied to an in-page experience, you can then use the styling options to further customize the appearance of the experience.

This topic contains the following sections:

Creating a custom theme

To create a custom theme, follow these steps:

Note: If you have existing themes, it may be quicker to duplicate a theme and then make edits vs. creating a new theme.

  1. Edit the experience and then click STYLE in the left navigation. The current theme is displayed at the top of the styling menu.
  2. Click on the theme. A list of all the themes will be displayed.
  3. Click the Add a custom theme link.
  4. Enter a Name for the theme.
  5. Edit the styles as appropriate. All changes made to the style settings will be saved automatically.
  6. When done, click < Back to Styles.

Applying a theme to an in-page experience

To apply a theme to an in-page experience, follow these steps:

  1. Edit the project and then click STYLE in the left navigation. The current theme is displayed at the top of the styling menu.
  2. Click on the theme. A list of all the themes will be displayed. Click on a new theme to select it.
  3. When done, click < Back to Styles.

Editing a theme

When you edit a theme, any of the style changes will be applied to any existing in-page experiences that the theme has been applied to unless a specific styling setting was changed in the experience. For example, a corporate theme is created, Corporate Theme, and the overlay text color is set to red. A new in-page experience is created and the overlay text color is changed to blue. If someone applies the Corporate Theme to this new experience, all of the style changes will be replaced with the styles specified in the Corporate Theme except the overlay text color as that style was changed earlier.

To edit a theme, follow these steps:

Note: Built-in themes cannot be edited.

  1. Edit the experience and then click STYLE in the left navigation. The current theme is displayed at the top of the styling menu.
  2. Click on the theme. A list of all the themes will be displayed.
  3. Click the edit icon () for the theme you want to edit.
  4. Edit the styles as appropriate. All changes made to the style settings will be saved automatically.
  5. When done, click < Back to Styles.

Duplicating a theme

To duplicate a theme, follow these steps:

  1. Edit the experience and then click STYLE in the left navigation. The current theme is displayed at the top of the styling menu.
  2. Click on the theme. A list of all the themes will be displayed.
  3. Click the duplicate icon () for the theme you want to duplicate.
  4. Enter a new name for the theme and click Save.
  5. Edit the styles as appropriate. All changes made to the style settings will be saved automatically.
  6. When done, click < Back to Styles.

Deleting a theme

To delete a theme, follow these steps:

Note: Built-in themes cannot be deleted.

  1. Edit the experience and then click STYLE in the left navigation. The current theme is displayed at the top of the styling menu.
  2. Click on the theme. A list of all the themes will be displayed.
  3. Click the delete icon () for the theme you want to delete. You will be prompted to confirm the deletion.
  4. When done, click < Back to Styles.