260 1st Ave South Suite 200-Box#50 St. Petersburg, FL 33701
1+727.897.5456
info@enovatelearning.com

How to Create Custom Theme Colors in Storyline 360

Storyline Custom Theme Colors Editor

Summary

Create Custom theme colors in Storyline to speed up the eLearning development process. The Custom Theme Colors feature in Articulate Storyline 360 allows you designate default colors for all the elements of your projects (e.g., text, shapes, hyperlinks, slide background colors and more). Then, when you insert the element onto a slide, the element already has the desired color. You don’t waste time manually changing the colors of each element. This post shows how to create, apply, edit and delete Custom theme colors. In addition, the post includes a helpful Theme Color Selector template you can download and use to organize the elements and corresponding colors.

Skilled Articulate Storyline eLearning Designer and Developer

Rema Merrick is owner, lead instructional designer and eLearning developer at Enovate Learning LLC. She has eight years of experience developing eLearning (CBTs and WBTs) and other training modalities for corporations in the airline, utilities and other industries. She holds a master of science in Instructional Technology from Bloomsburg University of Pennsylvania and is a member of ATD Florida Suncoast. Her hobbies include running, practicing yoga and participating in Articulate’s E-Learning Heroes E-Learning Challenges.

Author: Rema Merrick, MSIT
Published: January 24, 2023
Time to Read: 5 minutes 

Task Completion Time

Once you identify the project default colors for each element, it should take less than 15 minutes to designate them in the Custom Theme Color editor.

Prerequisites

Creating new theme colors for a project doesn’t require any specific prior Storyline knowledge.

Introduction

To create Custom theme colors in Storyline requires two major steps: 1) identifying the 16 colors for each of the element categories; and 2) setting the default colors in the Custom Theme Color editor. Applying Custom theme colors to a project involves three steps. Editing and deleting Custom theme colors entails four steps for each task.

Choose the Default Colors for the Elements

Consider the color palette you plan to use in the project. For example, the palette may be based on your company’s brand colors found in a style guide. Using the color palette, choose a color for each of the following 16 elements in the project.

The text color for slides and shapes with dark backgrounds

The text color for slides and shapes with light backgrounds

The background color for slides with light backgrounds

The background color for slides with dark backgrounds

The fill color for shapes, captions, check box styles 1 and 2, radio button styles 1 and 2, and markers

Five colors to access in style galleries and color selectors; these are colors that you can quickly access at any time to change the default color of an element

The text color for hyperlinks

The hover color for buttons and answer choices (does not include drag items, drop-down questions and Likert scale questions); the fill color for hotspots

The colors for correct quiz elements (i.e., icons, review banners)

The colors for incorrect quiz elements (i.e., icons, review banners)

The fill color for buttons

The fill color for check box styles 3 and 4, radio styles 3 and 4; the hover color for drag items, drop-down questions and Likert scale questions  

Use the Theme Color template provided in this post to help you organize the elements and corresponding default colors. The download form is located at the end of the post.

Set the Default Colors in the Theme Colors Editor

  1. Select the Design tab.
Storyline Custom Theme Colors
  1. Select the Colors drop-down menu.
Storyline Custom Theme Colors
  1. Select Create New Theme Colors.
Storyline Custom Theme Colors
  1. Type the name of the custom theme color in the Name: field box.
Storyline Custom Theme Colors
  1. Select the Text/Background – Light 1 triangle. The color selector appears.
Storyline Custom Theme Colors
  1. Select the color using one of two methods: eyedropper tool or color code drop-down menu. Use the eyedropper tool to match the color of any item visible your screen. Or, use a color code: RGB, Hex or HSL.

Eyedropper Tool

    1. Select the eyedropper tool.
Storyline Custom Theme Colors
    1. Click on a color on the screen. Notice that as the eyedropper/mouse moves over the screen, a corresponding color appears in a square box next to the eyedropper tool.
    2. Left-click on the mouse to select the color. Notice the color in the square box to the right of Text/Background – Light 1 and above the eyedropper tool changes to match the selected color
Storyline 360 Custom Theme Colors

Color Code

    1. Select the color code drop-down menu to the right of the eyedropper.
Storyline Custom Theme Colors
    1. Click on the color code type (RBG, Hex or HSL); then, type the corresponding values in the three boxes to the right of the drop-down menu.
Storyline 360 Custom Theme Colors

NOTE: RGB values use a three-integer format (e.g., 245, 245, 245). Hex values use a #RRGGBB format (e.g., #77933C). HSL values use a three-integer format (e.g., 79, 42, 41).

  1. Repeat step 6 for the remaining 15 elements.
  2. Select the OK button. The default colors are set for this theme.
Storyline Custom Theme Colors
  1. Select the Colors drop-down menu. Notice the new custom theme color in the Custom section of the drop-down menu. This verifies that the new custom theme was successfully saved to Storyline.
Storyline Custom Theme Colors

Apply the Custom Color Theme

These instructions show one way to apply Custom theme colors for a project. There are other ways, not shown in the post, to apply a custom color theme to a project.

  1. Select the Colors drop-down menu from the Design tab. Notice of custom theme colors displays in the Custom section. 
Storyline Custom Theme Colors
  1. Right-click on the custom theme colors you wish to apply. Notice a list of the ways you can apply the custom theme colors. You can apply them to matching master slides, all slides or the currently selected slide.
Storyline Custom Theme Colors
  1. Choose one of the following ways Storyline should apply the Custom theme colors to the project.
    1. Select Apply to Matching Slides to apply the theme colors to all slides in the project that are based on the same master slide as the currently selected slide.
    2. Select Apply to All Slides to apply the theme colors to all slides in the project.
    3. Select Apply Only to This Slide to apply the theme colors to the currently selected slide(s).
Storyline Custom Theme Colors

Notice the active theme colors for the project appears on the far left of the Themes display.

Storyline Custom Theme Colors

Edit the Custom Theme

  1. Select the Colors drop-down menu from the Design tab. The list of custom theme colors displays in the Custom section on top.
Storyline Custom Theme Colors
  1. Right-click on the custom theme colors.
Storyline Custom Theme Colors
  1. Select Edit. The Theme colors editor displays. Make the desired changes. See the Set the Default Colors in the Theme Color Selector Editor steps 6 – 8 of this post.
Storyline Custom Theme Colors
  1. Select OK.
Storyline Custom Theme Colors

Delete the Custom Theme

  1. Select the Colors drop-down menu from the Design tab. The list of custom theme colors displays in the Custom section on top.
Storyline Custom Theme Colors
  1. Right-click on the custom theme colors.
Storyline Custom Theme Colors
  1. Select Delete.
Storyline Custom Theme Colors
  1. Select YES.
Storyline Custom Theme Colors

Wrap Up

This post showed how to create, apply, edit and delete Custom theme colors in Articulate Storyline. Creating Custom theme colors involves two main steps: 1) identifying the color of each of the 16 categories of elements; and, 2) setting the default colors in the Custom Theme Color editor in Storyline. You may find it helpful to use the Theme Color Selector template provided in this post. The template helps to organize the elements and their corresponding default colors.

Please share your comments regarding the project and development process. I would love your feedback on what you found helpful, what you found confusing and what additional information would have been more helpful.

Storyline Custom Theme Colors Template
Type your name and email in the form to receive a download link.

Contact

If you have any questions about this article or our company, please contact us at info@enovatelearning.com or (727) 897-5456.

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.