Change the Colors of the Modern Storyline 360 Player!

May 02, 2019

Turquoise Modern Player

Those of you who have an Articulate 360 subscription know that Storyline 360 has two player options: the Classic Player and the Modern Player. The Classic Player can be extensively customized, including choosing your own colors for every aspect of the player. However, the Modern Player has only two overall color options: light, or dark.

In order to customize the colors of the Modern Player, I had to look for help outside of Articulate. I discovered Cluelabs, a company that offers free, nifty widgets for several eLearning software applications.

Using their Storyline 360 Modern Player Custom Colors widget, I created a turquoise player for my Leadership 101 course starter template.

Blog post: https://tracycarroll.net/leadership-101/

How about you? If you create eLearning courses using Storyline 360, have you missed the ability to customize the colors of the Modern Player?

29 Replies
Soren J Birch

Well I am not sure where to click to change the player font color, but please share if you find a way to do it. It affects the Title and slide out menu text (you can see the title on the left in the screenshot), but the buttons in the top right menu are kept in pure white from what I can tell. I would prefer all text elements to be white.

 

Judy Nollet

This page explains the new customization option for the Modern player: 

https://articulate.com/support/article/Storyline-360-Modern-Player-Custom-Color 

Unfortunately, they don't allow customizing the font color.  Here's what they say: 

"Note: When you choose a dark custom background color, the player controls use hex color code #BABBBA. When you choose a light custom background color, the player controls use hex color code #585858. Make sure your custom background color has a contrast ratio of 3:1 or higher against the player control color so learners with low vision can read it."

I don't understand why they didn't just use white text for dark background colors and black text for light background colors to ensure the best possible contrast...