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
Hassaan Ijazuddin

This is cool David. Ever tried to insert an icon in the top menu? Using your method, I tried to insert an icon with jQuery and fontawsome but icon doesn't work well when browser window resizes - changes back to text. Might have to hard code it in the CSS for responsive behavior. 

$("#tab-customlink:contains('Home')").html("<i class='fa fa-home' aria-hidden='true'></i>");


Doug Cush

A big thanks to everyone who's contributed - it's really helped me tailor the modern player to my company's brand guidelines.

The only thing I've been unable to change is the styling of the hover/selected appearance of list items. I've been sifting through the inspector and found the class (because I was able to change the colour in the inspector) but haven't had any luck accessing it via Storyline.

Does anyone know how to achieve this? I've attached a gif to demonstrate.

Christian King

You would only need to do this if you allow the user to resume the storyline module if they reload the page.. as I don't think it will re-execute the javascript on the first slide. I just added a trigger on the first slide to execute the script when the timeline starts and it works perfectly but I don't allow resuming.

Opps missed second page..looks like Stem Fuse posted a good workaround..

David Crocker

Hi td,

I did a quick experiment and it seems you can. It depends on what you want to change. The following code will change the player border to red at the top graduating to yellow at the bottom:

$(".top-ui-bg").css("background-image", "linear-gradient(red, red");
$(".area-primary").css("background-image", "linear-gradient(red, yellow")

The top line defines the gradient for the top bar to just red, hence both colours are red. The second line changes the sides and bottom bar from red gradually to yellow. You can use Hex colours if you want.

The Linear-Gradient tag seems fairly flexible, you can set direction, more colour stops etc.  See this page for more information on syntax:

Hope this helps a little


Marilou Kozmick

Hello everyone,

I think that something has changed with the new update because the javascript tricks are not working anymore in the modern player. 

I did my elearning last week, and everything was all right, I could change the modern background colour, and even put the module in full screen with a few javascript tricks. But now, when I tried to publish it, it doesn't work anymore... 

I even tried publishing the file story of David Crocker, and same thing, doesn't work anymore. So I really think this is due to the recent update.