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.
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. 🙂
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..
This should sort the menu background
$(".panel-content-menu").css("background-color", "#1E3140")
We've done this by adding the Execute JavaScript trigger to the Slide Master. It's helpful if you need users to be able to resume content (and avoid adding the trigger to each slide).
Question - has anyone tried adding a full-screen image or video using this technique?
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>");
If anyone is still interested in trying to do this, I was able to dig into the CSS sheet in the output folder and find color value locations for most of the elements for the Modern player. I can share how I did that if anyone is interested.
Definitely interested! Thanks for your hard work. Much appreciated!
