Forum Discussion
Changing Colours on Modern Player Without Plug-Ins or Externally Hosted Content
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 36...
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.
