Change the Colors of the Modern Storyline 360 Player!
May 02, 2019
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?
29 Replies
Nice that Cluelabs offers a way to customize the colors of the Modern Player. It's too bad Articulate doesn't provide that option. For a simple, flat player, they should be able to provide an easy way to customize the colors by setting just a few (e.g., indicate the base color, indicate the text color, indicate the highlight color).
The classic method -- adjusting >100 settings, some of which you can't see while doing this -- has always been frustrating. And even after all these years, some of the settings (Menu and Glossary scroll bars) don't work properly...
This is so great! So it's just adding js into the player, which is a task on its own. Are there others like Cluelabs or an Open Source site with js snippets?
I don’t think I would recommend doing this for courses that require updating. I have a feeling the JS will break the next time Articulate does an update to the player.
So, if it broke, would it just default to the regular colors? or are we talking breaking the course completely?
Merci Tracy!
C'est exactement ce dont j'avais besoin :-)
I've had success modifying the CSS after the course is published. The problem with that is having to do it again if you republish, you can't copy over the code because it seems to be different every time. Different strings of characters for objects. Next time I do this I will make notes of the elements I was able to change.
Here are the changes I made, of course there are many more. I'm writing these notes for anyone else who only has a cursory idea of what to do in CSS. What I do is, in the browser (Chrome), I use "Inspect" (right click). Then there's a symbol in the upper left corner of that window. When you roll your mouse over the image, it highlights which code you're looking for. You can make changes in Inspect, just to see how it might look and if you have the right block. It will tell you which css file the change is in, there are two.Then, open the CSS files in Wordpad.
Find: ...html5/data/css/output.min.css (This one is for changing colors). Always be scrolled to the top of the document when you do a search, and click your cursor to the very top. Make one change at a time, SAVE the css and reload the page in the browser, to make sure it's the change you want.
The background color for the main area needs to be changed in 3 parts:
- search for .left-ui-bg, this changes the color of the top band in the main area. Where it says background: rgba (255, 255, 255, 1) is white so you can change those to a color you like. I don't know what the 4th number is for (it's a 1 or 0.8), just make sure all the same colors use the same 4th number. You can also use hex color codes in this format: #ffffff
- jump to the top of the document, search .cs-area, this is the middle, change that number to the same as the top
- jump to the top of the document, search .cs-base , this is the bottom part. Change "background" to the same color.
To Change the color of the whole left menu background, scroll to the top and search .cs-left, then change the background color.
Sizes
I found the left menu area too big, so I made a couple of changes to "html5/data/css/output.min.css"
- I wanted the logo to butt up against the sides, so I searched for "170px" (since I had figured out that's how big they make it in Inspect), that brings up the logo height, which I assume is locked to the width. I changed mine to 270px.
- To make the width of the menu, I searched }.area-secondary-wrapper, then changed all the 400px widths to 300px.
This took me a lot of practicing and trying things but if you screw up, either save the original css or just re-publish. Eventually I will be finding more things to change but for now, this satisfied our SME who didn't like the full-on white took of the Modern Player. It's not as hard as you think and now that I'm used to it, it only takes 5 minutes or so.
Here is a screenshot of the CSS changes made above, modifying the white Modern Player.
Nice work Cheryl!
Cheryl I like your idea, thanks. It remains in my control then.
I tried Cluelab but when I investigated further in looks to me like if you have many users for your course, they will eventually ask for you to pay for this or upgrade to their premium option. (They control the file). If you don't pay they could just delete the folder, which jumps to your saved colours. Perhaps for courses that don't reach a wider audience it may be a good way.
I could be wrong but that's how I understood their TERMs.
Would be great if Articulate can save us the time here :)
Hi Carol,
I looked, but didn't see anything that indicated to me that Cluelabs will change their terms to require payment.
Based on their website, I believe the Premium widget option is for those who want a custom widget built, and cannot use any of the free widgets.
I checked, and the Cluelabs widgets I used for various courses are still working for me, but of course I cannot guarantee they will work for all time.
(Many of the Storyline courses I've created with no widgets at all don't work several years later, so why would this be any different?!)
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.
Thank you Owen!
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.
It's Storyline 3.38 now and about half of this isn't doable anymore, FYI. Although you can still change colors with "output.min.css" but positioning and sizing are no longer doable with CSS, the way I described. It's now done with javascript and too complicated for me. So, any instructions above for "main.min.css" are no good, but you can still change "output.min.css" for colors.
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 :)
@ staff => Is there anything about modern player customization on the next SL360 roadmap ?
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.
Hello Everyone,
I'm happy to return with some exciting news! 🗞
Storyline 360 Update 54 is here, and it introduces several features and bug fixes! Here's the item you'll be interested in:
New: Customizing the Modern Player Colors.
Just launch the Articulate 360 desktop app on your computer and click the Update button for each application—details here.
Please let us know if you have any questions or reach out to our Support Engineers directly!
Great news! Thanks for the info.
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?