Forum Discussion
Change the Colors of the Modern Storyline 360 Player!
Those of you who have an Articulate 360 subscription know that Storyline 360 has two player options: the Classic Player and the Modern Player. The Classic Player can be extensively customized, including choosing your own colors for every aspect of the player. However, the Modern Player has only two overall color options: light, or dark.
In order to customize the colors of the Modern Player, I had to look for help outside of Articulate. I discovered Cluelabs, a company that offers free, nifty widgets for several eLearning software applications.
Using their Storyline 360 Modern Player Custom Colors widget, I created a turquoise player for my Leadership 101 course starter template.
Blog post: https://tracycarroll.net/leadership-101/
How about you? If you create eLearning courses using Storyline 360, have you missed the ability to customize the colors of the Modern Player?
I was hoping that was the case, but have a look at these screen caps - It does look like if you exceed a certain tier you will be asked to provide your credit card details or the widget will stop working. As they house the 'container' this can easily be done. Maybe its okay if courses don't reach a wider audience and tiers are exceeded?
Nevertheless, its a great option. Although I feel comfortable with Cheryl's workaround which works a treat with a little bit of fumbling around the CSS initially. (and it remains in my control)
Glad it's working for you. I keep notes of the changes in each publish of the CSS, after a while it gets easier.
Hi Carol,
I didn't see those screen shots, but I can understand your concern once you saw them!
As for me, I've never given them a cc number, so I know I cannot be charged. For me, their widgets are fun to play with, but not something I use for clients.
Yes you are right Cheryl. What a pity the new update inhibited that! I am pleased though that we can still change the colour using the 'output.min.css' - Thanks to you, this has really made my projects more bespoke for my clients whilst still benefiting from the modern player attributes.
Here is my mint green player :)
Wow Carol that looks wonderful! Such a difference to be able to customize the player. Yours really looks like it belongs to your client!
If you're interested, a colleague figured out one thing for me, making the menu sidebar skinnier. That was just one of the changes we had been making for this particular SME. But it involves altering one number in one of the many javascripts and I get the feeling I'm always going to have to find the answer with a fine tooth comb with every publish. Anyway, here it is:
To change the width of the menu sidebar on a desktop: Edit the ds-frame.desktop js, Search for "245", there should only be one result. Back up from there and it says "innerwidth/4", this is the minimum value that thing can be before it disappears. So with a minimum total width of 900px, divided by 4, the smallest it will get is 225, even if you change that 245 to something like 100. If you change the 4 to an 8, the minimum becomes 112.5px (113) because 900/8 is 112.5. Set the 4 to as close as you can get to 900/x to equal the value you have. The minimum becomes 180 if 900 is divided by 5.
(Just FYI, I didn't write that last thing, I don't know javascript!)
Thanks Cheryl!
Wow that's fantastic, I am going to give it a go. Thanks so much for sharing :)
Hi Benoit,
Thanks for reaching out! It's not a feature we've added to Storyline yet, but we have a report of folks who have requested it, and I can add you to that!
Here's a bit more about how we work to prioritize feature requests.
Oh wow!! Brilliant (applauds loudly :) )
Just tried it. It is a start, hope for more granularity. For example, with Custom theme the default player font color is a washed out gray that looks super bad on our brand color. Is there a way to modify that, or do I still have to rely on 3rd party solutions if I want to use the Modern player - or stick with Classic?
Hi Soren. You are able to change the custom colour to any colour of your choice. :)
Oh sorry Soren, you meant the font.. hmm I didn’t notice that..?
Well I am not sure where to click to change the player font color, but please share if you find a way to do it. It affects the Title and slide out menu text (you can see the title on the left in the screenshot), but the buttons in the top right menu are kept in pure white from what I can tell. I would prefer all text elements to be white.
This page explains the new customization option for the Modern player:
https://articulate.com/support/article/Storyline-360-Modern-Player-Custom-Color
Unfortunately, they don't allow customizing the font color. Here's what they say:
"Note: When you choose a dark custom background color, the player controls use hex color code #BABBBA. When you choose a light custom background color, the player controls use hex color code #585858. Make sure your custom background color has a contrast ratio of 3:1 or higher against the player control color so learners with low vision can read it."
I don't understand why they didn't just use white text for dark background colors and black text for light background colors to ensure the best possible contrast...
