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.
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.
@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.
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.
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).
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.
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".
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!
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..
Hi David It's been awhile since you put this out to the community. I used your script this morning and was able to change the background colour of the player. Wondering if there is a way to make it a gradient background. :) Have you tried this before. Thanks!
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:
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:
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.
65 Replies
Hi Anthony... Nope just just the first. See the storyline file above.
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>");
This post was removed by the author
@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.
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!
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).
I put a version on screencast, so you don't have to download it. :)
http://www.screencast.com/t/xw8W6oo0
Thanks for taking the time to demonstrate your process. Much appreciated!
It is possible to set custom colors. Use this to customize the modern player: https://cluelabs.com/storyline-360-modern-player-elearning-widget.html
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.
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".
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!
Thanks so much for this! It is exactly what I needed as I love the Modern player but dislike the two colour options. Thanks for sharing...
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!
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..
Hi David
It's been awhile since you put this out to the community. I used your script this morning and was able to change the background colour of the player. Wondering if there is a way to make it a gradient background. :) Have you tried this before. Thanks!
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
Thanks David. This is brilliant. I was able to change the colours to a gradient .
You're welcome. You can change any of the code in this thread the same way to get a gradient.
I have dated coding experience. Need to relearn the tricks :) Thanks once again David.
This post was removed by the author
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.