Forum Discussion
Changing the colour of the closed captions font and the background?
Hello!
I am playing around with the closed caption feature and try to make it work with our corporate colours.
Is there a way to alter the colors of the background and the fonts of the closed ca...
Hello Everyone!
I'm happy to share that we have released Storyline 360 version 86 (Build 3.86.32028.0).
Included in this release we have two new features:
- Position captions at the top or bottom of the slide to ensure closed caption visibility and prevent the obstruction of critical course content.
- Customize the foreground and background colors of closed captions to complement your course design and maintain contrast accessibility.
All you need to do is update Storyline 360 in your Articulate 360 desktop app on your computer. You'll find our step-by-step instructions here.
Please let us know if you have any questions by reaching out to our Support Engineers directly.
Have a great day!
Works!
I now use a trigger on the Slide Master that executes this JS:
/*
This will insert a custom style for captions into a Storyline course.
T make it work, it has to be executed by a trigger, that is on the master slide and gets fired at timeline start.
*/
/*First test if the style is already there from another slide */
var test = document.getElementById("MyStyle");
/* Add the style only if it is not there to avoid cluttering the DOM */
if(!test){
var body = document.querySelector("body");
/* create the element that will hold the style definition */
var style = document.createElement('style');
/* for older browsers it is necessary to give this type information */
style.type = 'text/css';
/* The new style element needs an ID so we can use it to test for its existance */
style.id = 'MyStyle';
/* The following is the style definition that will be applied */
style.appendChild(document.createTextNode(".caption p { background: rgba(236,212,76,0.7); color: black; text-decoration: none; text-shadow: none; font-weight: bold; }"));
/* finally append the element to the "body" of the document. */
body.appendChild(style);
}
You are awesome, Knut. Thanks for providing this information.
