Can we change background color in Modern Player - Storyline 360

Jun 14, 2018

Modern Player in Storyline 360 looks great. We would like to use it. But unfortunately, the courses have to conform to brand standards. Is there a way to change to background color instead of just dark or light mode? Thanks. 

65 Replies
Alyssa Gomez

Hey Ben!

You can change the colors for the modern player, using the Light or Dark options, and one accent color. Here's how. 

If you need more control over colors for each player feature, you can switch to the classic player and use the advanced color options as described here.

You can also turn off the player altogether and create your own custom navigation with buttons, hotspots, and hyperlinks. Here's how to turn off the player in Storyline 360.

Hope that helps! 

Leslie McKerchie

Hey David and welcome to E-Learning Heroes :)

Thanks for popping in to share your feedback. This has been a common request that we have received. I'm adding this conversation to the report as we track the user requests and so that we can update you here when we can.

I wanted to share some information about how we manage these feature requests as that may be helpful.  

Katie Riggio

Thanks for adding your vote, folks! 

We'll let you know if there's any forward movement with this color feature. Everyone who commented here will be notified immediately since that automatically subscribes one to this discussion! As always, feel free to share any suggestions with us in the community or through the Feature Request form.  😊

David Crocker

Ok i thought I would share where I have gotten to with jquery. I have been able to change the player colour with these commands in a javascript trigger:

$(".top-ui-bg").css("background-color", "#005E78");
$(".area-primary").css("background-color", "#005E78")

The hex numbers can be whatever you need.

This command will change the background of the slide area in the palyer:

$(".cs-slide-container").css("background-color", "#005E78")

There is still a bit to workout. The side bars for instance and the text/icon colours.

Here is an example

David Crocker

Ok so I have been able to find the css selector for the Left side menu. So the code to change the colour would be:

$(".sidebar-contents").css("background-color", "#005E78")

I can be a long process to find the right css code. Can someone in the know, Alyssa, Leslie? Find out the css codes to change the properties of the various parts of the player, text, Menu icon etc.


Alyssa Gomez

Hi there David! 

Editing the CSS is way outside our wheelhouse, so I'll have to leave it to the community to assist with that! In the meantime, we've shared with our Product team that folks want to see more color customization options in the Modern Player. If that feature is added in the future, we'll let you know. 🙂

David Crocker

Hey Matteo, here is the storyline file for the my example above with added menu background change. To change the colours for the player you should trigger the javascript on timeline start of you first slide. Sorry haven't had time to locate other colour changing css code yet. Hope this helps.