Change the Colors of the Modern Storyline 360 Player!

Here are the changes I made, of course there are many more. I'm writing these notes for anyone else who only has a cursory idea of what to do in CSS. What I do is, in the browser (Chrome), I use "Inspect" (right click). Then there's a symbol in the upper left corner of that window. When you roll your mouse over the image, it highlights which code you're looking for. You can make changes in Inspect, just to see how it might look and if you have the right block. It will tell you which css file the change is in, there are two.Then, open the CSS files in Wordpad. 

Find: ...html5/data/css/output.min.css (This one is for changing colors). Always be scrolled to the top of the document when you do a search, and click your cursor to the very top. Make one change at a time, SAVE the css and reload the page in the browser, to make sure it's the change you want.

The background color for the main area needs to be changed in 3 parts:

- search for .left-ui-bg, this changes the color of the top band in the main area. Where it says background: rgba (255, 255, 255, 1) is white so you can change those to a color you like. I don't know what the 4th number is for (it's a 1 or 0.8), just make sure all the same colors use the same 4th number. You can also use hex color codes in this format: #ffffff

- jump to the top of the document, search .cs-area, this is the middle, change that number to the same as the top

- jump to the top of the document, search .cs-base , this is the bottom part. Change "background" to the same color.

To Change the color of the whole left menu background, scroll to the top and search .cs-left, then change the background color.

Sizes

I found the left menu area too big, so I made a couple of changes to "html5/data/css/output.min.css"

- I wanted the logo to butt up against the sides, so I searched for "170px" (since I had figured out that's how big they make it in Inspect), that brings up the logo height, which I assume is locked to the width. I changed mine to 270px.

- To make the width of the menu, I searched }.area-secondary-wrapper, then changed all the 400px widths to 300px.

This took me a lot of practicing and trying things but if you screw up, either save the original css or just re-publish. Eventually I will be finding more things to change but for now, this satisfied our SME who didn't like the full-on white took of the Modern Player. It's not as hard as you think and now that I'm used to it, it only takes 5 minutes or so.