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.

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 https://360.articulate.com/review/content/42e2228e-e6d6-481b-9d37-90d56919325f/review

All we need are the right codes to change. Perhaps someone in the Product team could give us a list?

I put a version on screencast, so you don't have to download it. :) http://www.screencast.com/t/xw8W6oo0

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: https://www.w3schools.com/css/css3_gradients.asp Hope this helps a little

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!

Can we change background color in Modern Player - Storyline 360

GeorgeTuft-072a
Community Member
6 years ago
Hi Michael, I made a short (ish) video about how to explore the CSS files using the Chrome Inspector and a text editor application (I used Notepad++, which is free).
color_change_video.mp420.7 MB
MichaelGallaghe
Community Member
6 years ago
Thanks for taking the time to demonstrate your process. Much appreciated!
nicksol
Community Member
6 years ago
It is possible to set custom colors. Use this to customize the modern player: https://cluelabs.com/storyline-360-modern-player-elearning-widget.html
cush
Community Member
6 years ago
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.
EmersonCollins
Community Member
6 years ago
It's been over a year since the initial request for the ability to customize colors for the modern player. Any plans to adding that feature to Storyline 360? It exists for the Classic player but not for the Modern player. Hard to match corporate colors to "Dark" and "Light".
AlyssaGomez
Staff
6 years ago
Thanks for checking in, Emerson!

The ability to customize colors for the Modern Player isn't on our immediate feature roadmap, but we're keeping track of every request we receive. Thanks for letting us know this feature is important to you!
GarethClarke-e1
Community Member
6 years ago
Great work David!

Have you managed to locate the navigation width value? I'd love to be able to gain a bit more real estate back from the left menu panel.

Thanks for your efforts!
td-ea775692-04d
Community Member
6 years ago
Thanks David. This is brilliant. I was able to change the colours to a gradient .
DavidCrocker
Community Member
6 years ago
You're welcome. You can change any of the code in this thread the same way to get a gradient.
td-ea775692-04d
Community Member
6 years ago
I have dated coding experience. Need to relearn the tricks :) Thanks once again David.