Forum Discussion
Can we change background color in Modern Player - Storyline 360
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.
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
Your a God among the community David!
Oh wow, David! Thanks for sharing :)
If you have a Glossary this gives you a custom color
$(".cs-glossary").css("background-color", "#1E3140")
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!
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.
@David Crocker You are a brilliant human who deserves accolades and praise. Thank you for this. It's been really helpful to add the final polish to a series of games that I've been developing.
Thanks David fantastic we are getting there :)
If you use Javascript, I am assuming you will need to execute on each slide?
Hi Anthony... Nope just just the first. See the storyline file above.
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..
