Storyline 360: Choosing Player Colors, Fonts, and Button Styles

Personalize the player frame around your slide content with colors and fonts that complement your course design or match your brand. And if you’re using the modern player, you can also choose a button style—icons, text, or both icons and text.

• Choose Colors, Fonts, and Button Styles for the Modern Player
• Choose Colors and Fonts for the Classic Player

Choose Colors, Fonts, and Button Styles for the Modern Player

It’s super easy to customize colors, fonts, and button styles for the modern player. Here’s how.

1. Go to the Home tab on the Storyline ribbon and click Player.
2. When the player properties appear, make sure the Player Style is set to Modern. (Learn more about choosing a player style.)
3. Click Colors & Effects on the ribbon, then choose your colors, fonts, and button styles. See below for details.

Player

Select the built-in dark or light player theme, or create your own player theme. The neutral tones of the dark and light themes allow your content to be the focus of learners’ attention, while the player performs a supporting role in the background.

Choose an accent color from the color selector (the default accent color choices come from your theme colors). The accent color is used throughout the modern player to tie it all together. For example, the accent color highlights the current slide in the menu, identifies the selected tab in the sidebar, and shows the progress of the seekbar.

Set two accessibility focus colors—one light and one dark—so the focus indicator is visible on any background. The accessibility focus rectangle lets sighted keyboard-only users see which object is currently selected.

Choose a player font and font size for the text that appears throughout the player, including the course title, the menu, and navigation buttons. The size percentage defaults to 100%, but you can choose any percentage between 75% and 200%. If your course has video transcripts, the font and font size you select for all player elements also applies to transcript text.

By default, navigation buttons display both icons and text—i.e., arrows and text for previous and next buttons as well as text and check marks for submit buttons. You can switch to just icons or text instead. (Navigation buttons will always be icons on smartphones due to the limited screen space.)

Tip: To customize the text for navigation buttons, edit the text labels in your player properties.

Closed Captions

Customize the foreground and background colors of your closed captions.

Choose a captions font and font size. The size percentage defaults to 100%, but you can choose any percentage between 75% and 200%.

Position captions at the bottom or top of the slide.

Choose Colors and Fonts for the Classic Player

Note: Classic player colors and fonts only work on desktop and laptop computers—except the captions font, which works on all devices, including tablets and smartphones. See this interactive demo to know which classic player properties work on mobile devices.

Here’s how to customize colors and fonts for the classic player.

1. Go to the Home tab on the Storyline ribbon and click Player.
2. When the player properties appear, make sure the Player Style is set to Classic. (Learn more about choosing a player style.)
3. Click Colors & Effects on the ribbon, then choose your colors and fonts. See below for details.

Choose a Color Scheme

Choose a built-in color scheme or a custom color scheme that you previously created from the Color scheme drop-down list. The preview pane on the right side of the window will automatically update so you can see how your color scheme looks.

Create a Custom Color Scheme

Here’s how to create a custom color scheme.

1. Click Show advanced color editing to reveal additional color options.
2. Choose the portion of the player you want to customize from the Edit item drop-down list. (Download this job aid to identify which player colors affect each player element.)
3. Use the color selector to choose a new color. (If you see top and bottom colors, it means the item is a gradient composed of two colors.) 
4. To apply transparency to the item you're modifying, enter a percentage in the Transparency field. (Transparency isn’t available for all items.)
5. Repeat steps 2-4 for each player element you want to customize.

If you change your mind and want to undo the edits you made, click the Reset button (it looks like a window icon with a backward-pointing arrow).

Save a Custom Color Scheme to Reuse It in Other Projects

By default, a custom color scheme is only stored in the project file you’re currently working on. If you want to reuse a custom color scheme in other Storyline projects, just click the Save button, give your color scheme a name, and click OK.

When you save a custom color scheme, it appears in the Color scheme drop-down list so you can apply it to any Storyline course you create. A saved color scheme is stored in the current project file and in the following directory on your computer:

%AppData%\Articulate\Storyline\360\Frames\StoryFrame\ColorSchemes

Delete a Custom Color Scheme

To remove a custom color scheme, select it from the Color scheme drop-down, then click the Delete button. (Built-in color schemes can’t be deleted.)

The deleted scheme will no longer appear in your color choices. However, if you delete a color scheme that's applied to another course, it won't be removed from that course; it'll just be stored in that particular project file.

Choose a Page Background Color

The page background color appears behind your published course. Learners may see this color around the outside of your player frame. And if you made the base of your player transparent, the page background color will show through the player.

Use the Page background selector to choose a color. The color palette comes from your theme colors. If you don't see the color you want, click More Colors to enter a custom color value.

Select Your Fonts and Set the Font Size

Choose a Player font for the text that appears throughout the player, including the course title, the menu, and navigation buttons.

If your course has closed captions, you can also choose a Captions font.

And you can increase or decrease the font size for all player elements and closed captions as a single unit by adjusting the Player font size percentage. It defaults to 100%, but you can choose any percentage between 75% and 200%.