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!
Another update on this topic:
Changing the look of a caption with this code works with a trigger, but only on the exact caption that is visible when the trigger is fired, so it is not a way to alter all the captions.
So the problem is to permanently change the stye definitions of the page and not just the appearance of one element.
One way to do that is to add a style element to the document tree, with the desired changes.
After a little googling and looking at StackOverflow, I found this to work:
var body = document.querySelector("body");
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(".caption p { background: rgba(236,212,76,0.7); color: black; text-decoration: none; text-shadow: none; font-weight: bold; }"));
body.appendChild(style);
Not sure if it is the best way to do that, but it is a lot less work to maintain than my first solution, because once you have the trigger, you can just copy that into every new course.
