Changing the colour of the closed captions font and the background?

Sep 18, 2017


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 captions?

Pinned Reply
Luciana Piazza

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:

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!

50 Replies
Knut Jackowski

After playing a bit with the developer tools of my browser, I found that this css changes the closed captions:

.caption p {
background: rgba(236,212,76,0.7);
color: black;
text-shadow: none; /* The captions usually have a shadow, that looks wierd with a darker text colour */

But now I am thinking about where to put it. My guess would be that it is best to put it in a css file that is linked after the two that are there by default.
Does somebody have some experience in using custom css in a Storyline project and where to put it?
Is there maybe even a way to include it without having to change the output of Storyline and zip it again?

Or is this maybe better asked in a new question?

Knut Jackowski

That's a good idea. It has no id but working with class and tag should also do the trick. Usually I am not a fan of changing css via JS , but I am also not a fan of having to edit the story_html5.html file on every new publish. Doing it via trigger will also make it easy for coworkers who do not enjoy code to replicate.

Michael Anderson

Let us know if that works out. Of course we must be careful that classes aren't changed in future versions of published output. I've never been a fan of solution that required editing the published output, especially when working with a team.

I've been looking through a lot of the Storyline 3's published output, and it looks like Articulate is now using something called React to generate the published output. Are you familiar with that at all?

Knut Jackowski

Yes, I also noticed that. I know what it is (a modern JavaScript framework) and plan to learn it, but did not find the time until now. It is somewhat of a hype in the JavaScript community, because it makes some things, that have been hard, easy and maintainable. It is developed by Facebook for their front end.

I will post an update here when I try the trigger solution, but it will be not before friday.
Today I tried adding the css by changing the story_html5.html file like I described above and it worked, but I am not that eager to make this our standard procedure.

Knut Jackowski

So far I have not been successfull changing the colors via JavaScipt triggers.

From my browsers console, I can get the captin with this:

var myCaptions = document.getElementsByClassName("caption")[0].children[0].children[0];

and then change its properties like this: ="rgba(236,212,76,0.7)"; ="black"; ="none"; ="bold";

But until now, I did not get it to work from a trigger.

Knut Jackowski

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; }"));

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.

margit g

Hi, I found a solution to change the colour etc of the captions in the entire course. 

Publish the course and open the main.min.css file. (It helps if you use sublime and prettify the code). Search for 

.caption p{display:inline-block; 

look for color:#ffffff - to change the text color

background:#31373a - to change the background of the captions

feel free to remove the shadow by changing the values text-shadow to zero.

See the attached screenshot. 

Note that you have to redo the changes when you republish your course. But you can backup a copy of main.min.css and paste the file after the export.


Knut Jackowski

I have considered both ways (editing the css file vs. JavaScript trigger) and for myself chosen the trigger version, because of the additional work with each new published version of a course that the other way needs, but both have their merits and drawbacks:

The biggest drawback of editing the css file is that you have to do it again each time you publish. This can get tedious if you usually publish new version of the same course and it is easy to overlook.

The biggest drawback of using a trigger is that it only works when the slide that the trigger is on, is seen by the learner. When you use the option to resume a course, this might lead to learners skipping the slide that includes the trigger and thus not having the styled captions.

Knut Jackowski

Michael, thanks for that idea. I am doing that now and it seems to provide a solutions to the drawbacks of both methods, that I tried before.

(It will make the DOM a little messy, because it will append the same element for each slide, but I don't think that this will cause any problems.)

EDIT: Just after writing this, I realized, that I could add a test to the JavaScript that first looks for the element and only appends it, when it isn't there. Will do that and post about my results later.

Knut Jackowski

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 */
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 */ = '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. */
Carole Manny

Is adding code really the only way to change the color and font size of the closed captioning? That's more than I bargained for. Under Colors & Effects, we've got Player font, Player font size, and Captions font. Why wasn't a Captions font size included? Changing the player font size does indeed increase the cc text size, as noted elsewhere, but it also increases the font size of everything else. That's not necessarily desirable. Will greater cc style choices be available in the future?

Alyssa Gomez

Thanks for that feedback, Carole! I can definitely see how having more options to adjust caption text size and color would make life easier. Would you mind sharing your idea with our product team in a feature request here? 

We're always thinking of ways we can improve our products, so keep the ideas coming!