Tutorial: Change the Closed Caption Font Size

Have you ever wanted to change the font size of the closed captions in Storyline 360, only to find that you'd also be adjusting the size of your menu and buttons?

Or maybe you want to give your captions a different background colour or make them take up the full width of the container?

In this tutorial, we will look at how to do this and also consider how cool it would be if your learner could alter the size of the captions while they were viewing the course.

Click here to see the tutorial, here to see a demohere to download the source file and here to grab a cheat sheet.

Let me know if you have any questions, comments or are stuck with implementing any of this. I'm happy to help where I can.

7 Replies
Matthew Bibby

Actually, I reckon I do know what's causing the problem.

Articulate have changed the file structure when publishing to just HTML5, so it is likely the first line of code that is causing the issue.

So, delete this:

if (/_html5.html/.test(window.location.href)) {

And also remove the closing } which is at the end of the code snippet. That should do the trick.

Nicole Ralph

Good morning Michael, 

Despite updating the code and testing across various browsers I'm unable to see the JavaScript make and change to the final output via LMS .  Is it possible articulate have made further html5 updates in the last 8 weeks?

Any help appreciated ..

if (!window.alteredCaptions) {
var sheet = document.createElement('style');
sheet.innerHTML = ".caption{font-size:150% !important;}";
window.alteredCaptions = true;