Can we change background color in Modern Player - Storyline 360

Ok i thought I would share where I have gotten to with jquery. I have been able to change the player colour with these commands in a javascript trigger:

$(".top-ui-bg").css("background-color", "#005E78");
$(".area-primary").css("background-color", "#005E78")

The hex numbers can be whatever you need.

This command will change the background of the slide area in the palyer:

$(".cs-slide-container").css("background-color", "#005E78")

There is still a bit to workout. The side bars for instance and the text/icon colours.

Here is an example

https://360.articulate.com/review/content/42e2228e-e6d6-481b-9d37-90d56919325f/review

All we need are the right codes to change. Perhaps someone in the Product team could give us a list?

I put a version on screencast, so you don't have to download it. :)

http://www.screencast.com/t/xw8W6oo0

Hi td,

I did a quick experiment and it seems you can. It depends on what you want to change. The following code will change the player border to red at the top graduating to yellow at the bottom:

$(".top-ui-bg").css("background-image", "linear-gradient(red, red");
$(".area-primary").css("background-image", "linear-gradient(red, yellow")

The top line defines the gradient for the top bar to just red, hence both colours are red. The second line changes the sides and bottom bar from red gradually to yellow. You can use Hex colours if you want.

The Linear-Gradient tag seems fairly flexible, you can set direction, more colour stops etc.  See this page for more information on syntax:

https://www.w3schools.com/css/css3_gradients.asp

Hope this helps a little

Hey Ben!

You can change the colors for the modern player, using the Light or Dark options, and one accent color. Here's how. 

If you need more control over colors for each player feature, you can switch to the classic player and use the advanced color options as described here.

You can also turn off the player altogether and create your own custom navigation with buttons, hotspots, and hyperlinks. Here's how to turn off the player in Storyline 360.

Hope that helps! 

Hi there David! I wanted to let you know that you can edit out your contact information from your post if you'd like.  Replying via email will include your signature.

Plus 1 vote for much more flexibility in modern player

Hello Marilou and welcome to E-Learning Heroes :)

The latest update did include a new accessible player. In addition, to improve security for our customers, we removed jQuery from Storyline 360. You can still use it to write custom JavaScript. You'll just need to reference the jQuery library directly.

Hey Marilou, sorry for this late reply. Yes you are right. Articulate in their infinite wisdom removed jQuery from Storyline so these hacks will no longer work. If you search for CLUELABS on the internet they have several widgets that work in storyline. One of them can change the colors of the modern player. You are required to sign up but use of the widgets is free. 

The workaround I've figured out to change background color is to modify the output.min.css file located in the Storyline output\html5\data\css folder. I just used Chrome's inspect tool to find the exact CSS property I wanted to change. Scanning through the output.min.css file using a HTML editor I discovered the background color was defined in the last .cs-base selector

.cs-pxabnsnfns00000000001.cs-base {
 background: #FFFFFF;
}

I changed this to the color I wanted. On my PC the code looks like:

.cs-pxabnsnfns00000000001.cs-base {
 background: #F8F9FA;
}

Now I can save this file and use it to overwrite the published output.min.css file as needed. 

This is faster than having to type the javascript library into the HTML every time you publish.