Changing the CSS for the HTML5 Version of Your Course in Storyline 2

I did a search of the discussions here to see if there is any way to change the size of the font in the notes section of the player via the GUI of Storyline 2.  As far as I can tell, there isn't a way to do that there, but there IS a way to change the way elements in the player appear in the browser after you have published the course. Just be aware that you are going to have to keep your changes in a separate place until you are ready for the final destination of your course.  Otherwise, the publishing process will keep overwriting your changes.

If you plan to do this, you should know something about editing CSS.  If you mess it up though, no worries, just republish and start over.  This could be a fun thing to do when you have time to learn about what Storyline 2 actually produces.  (Maybe not your idea of fun, but I am a nerd.)

The basic example is described below:

1. Publish a course to HTML5.
2. Find the file player.css in the published files.  At the moment, it lives in the mobile folder.
3. Open this file with a text editor or your favorite HTML editor.
4. The notes are published to elements with a class attribute of transcript_content. Find the CSS definition for this class and add a line for font-size or edit whatever other thing you want to change about it.  The CSS for this in my file looks like this: 
   .transcript_content
{
line-height:110%;
padding:8px 8px;
display:none;
font-size: 24px; //added line for font size
}
5. Save the file.  Open story_html5.html in your browser and see your changes.  Since index_lms_html5.html also uses the same css, the changes will take place there as well.
6. Save the file to a folder different than where you are publishing your course if you are not done with editing and publishing the content.  Later, you can copy it over to your final before zipping the entire course up and moving it to it's final location.