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.
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.
I don't think you can change the color of the light or dark options. The accent color looks like just for the texts and the seekbar. How do you change the light or dark options color to something else?
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.
Yes, I would love to be able to enter a hex value for the modern player background please. I always turn off the "menus and controls" but that still doesn't give me control over the background colour.
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. 😊
I have been experimenting with changing the colors with jquery. I have had some success but it would be good if we could get a list of css classes or ID's used for the player. Is that possible?
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:
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.
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. 🙂
Hello, I need to change the background color on the modern player too...it would be great to know how to change the right code ...I'm not quite able with code actually, but I could give a try!
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.
65 Replies
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!
Hi Alyssa,
I don't think you can change the color of the light or dark options. The accent color looks like just for the texts and the seekbar. How do you change the light or dark options color to something else?
Hi Ben,
At this time, there are only two main color options for the modern player: Light and Dark.
If you'd like to see more color options, share your feedback with us by clicking here!
Got it. Love the new Modern layout. Just wish to have some flexibilities.
Shame not able to change the background colour
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.
Hi Leslie
I figured you would be working on it anyway, just adding to the numbers!
Kind regards
David
Hi there David! I wanted to let you know that you can edit out your contact information from your post if you'd like. Replying via email will include your signature.
Plus 1 vote for much more flexibility in modern player
Yes, I would love to be able to enter a hex value for the modern player background please. I always turn off the "menus and controls" but that still doesn't give me control over the background colour.
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. 😊
Let's not stop at the background, let's have the same flexibility with colors as the classic player.
I have been experimenting with changing the colors with jquery. I have had some success but it would be good if we could get a list of css classes or ID's used for the player. Is that possible?
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
Oh wow, David! Thanks for sharing :)
Your a God among the community David!
Thanks Alyssa
David
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.
Anyone?
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. 🙂
All we need are the right codes to change. Perhaps someone in the Product team could give us a list?
Hello, I need to change the background color on the modern player too...it would be great to know how to change the right code ...I'm not quite able with code actually, but I could give a try!
Thank you!
If you have a Glossary this gives you a custom color
$(".cs-glossary").css("background-color", "#1E3140")
Thanks David fantastic we are getting there :)
If you use Javascript, I am assuming you will need to execute on each slide?
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.