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

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

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?

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

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

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.

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.

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.

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.

This is still an issue 2019-03-08. The Described and Captioned Media Program (DCMP) has published Closed Captions standards, guidelines and best practices (http://www.captioningkey.org/quality_captioning.html) White font with drop-shadow on a translucent gray background is the standard, and I think these should be the Player defaults, with easy access to adjustments available in the Player options, especially as DCMP does not specify a font size, only that it be readable and consistent throughout (http://www.captioningkey.org/text.html#2)

I'm able to modify Knut's extremely helpful code, but I can well understand why most are reluctant to do that.

more http://welookups.com/js/js_htmldom_css.html