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

If you found the element id, then you might be able to make some changes by placing a javascript trigger in the project that runs something like what you see here: https://www.w3schools.com/js/js_htmldom_css.asp

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.

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?

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.

I'll have to look more into React when I get a chance, if for no other reason than to be able to understand Storyline's output better. No rush for me on testing that, just something I'll add to my bag of tricks. Thanks.

Knut, a few of us have been trying to make a custom mute button in our projects. It looks like this is controlled by the "cs-volume" class with a range between 0 and 1. I haven't had any success myself. Could you take a look to see if you can make that work too?

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:

myCaptions.style.background ="rgba(236,212,76,0.7)";
myCaptions.style.color ="black";
myCaptions.style.textShadow ="none";
myCaptions.style.fontWeight ="bold";

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

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.

I will look into the volume thing on Monday I suppose ( I only have Storyline at work and now have to go to some meetings).

Thanks! I'll try to apply the same technique you used above to see if I can influence the volume setting.

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.

Thanks, Margit

Margit, you might be able to use Knut's example above and do that through an Execute Javascript trigger within the course. That way you would not have to modify the published output each time.

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, does placing the trigger on the Slide Master help with that or just cause more problems?

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.

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

That's great Knut! I'm saving your code for use elsewhere! :)

Knut, this is great. Do you know how to change the position of the CC box? I would like to lower it on my screen.

Thank you Knut!

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?

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!

any news on this?
:-)

I put in a feature request that same day (3 months ago). No response yet.