Changing Colours on Modern Player Without Plug-Ins or Externally Hosted Content

May 28, 2020

Electra Learning
By Electra Learning

Hi there,

One of the most requested features from our clients is a personalised player, adjusted to their branding colours and style. We love the look and feel of the modern player on Storyline 360, and would love to start offering our clients the modern player with customised colours.

I'm just wondering if there's any easy way that we can edit the colours of the modern player? We have tried the ClueLabs solution, which does work, but we wouldn't like to rely on it as many of our clients have learners in remote areas and we wouldn't like anything to break etc. due to low bandwith.

We have also tried changing the colour codes in the output.min file, which also works, but we are unsure if we would have to do this every time we publish a course, or if this is the best way to go about it.

Would we be able to export the modern player and edit the colours in the .xml file and then import that as a customised player? If so what is the best way to go about this?

Any help would be appreciated.

 

Thanks

4 Replies
Sam Hill
almost 4 years ago05/29/20 at 1:32 am (UTC)

Hi Lawrie, the way we go about this is to create a custom stylesheet which overrides the player colours. I just had a look at ClueLabs, and that is also what they do, but as you mentioned, host the CSS file on their servers.

We have a scene in the Storyline file, which is excluded from navigation. On the slide, we have a trigger to "Open {dir}\custom-sl-360-player.css" All this does, is ensure the CSS file is copied over when the project is published. The CSS file ends up in the "\story_content\external_files\" folder when published.

Once we know we have the file there, we just add some JS to the master template to load the CSS into the head of the document. We make sure we only load it once.

JS added to master template.

var file = "custom-sl-360-player";
// has file been loaded?
if(document.getElementById(file) !== null) return true;
// continue
var head = document.head;
var link = document.createElement("link");
link.id = file
link.type = "text/css";
link.rel = "stylesheet";
link.href = "story_content/external_files/"+file+".css";
head.appendChild(link);

There are no dependencies outside of your published content with this method.

Sign In to Reply