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

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?

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?

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.

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.