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

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?