Can we change background color in Modern Player - Storyline 360

@Leslie why remove jQuery? It was one of the best things you did when you included it. Was this an arbitrary move on your part without duscussing it with your customers? We have used jQuery alot and are always looking at new ways to use it. Now we will have to go back to the dark ages and manually edit the Html to reference it...... Its such a retrograde step.... very disappointed.... please put it back.

Well, you can add the jQuery library manually, so you can still use it if you want. But I agree, removing it was a really bad move that completely disregarded us, developers, who are affected every time something changes for no apparent reason.

To add to some of the previous comments: 1) It would be great if there was a way to customize all of the player colors in the Modern Player. Another vote for that! 2) I have been able to do this in the XML for the player (this sounds similar to what others were doing with CSS) - you can export it, make your edits, and then import it back into your project or other projects and then not have to think about it again. Finding the right labels and hex codes can be a little trial and error, but once you do it is easy.

Hi there, everyone!

To expand on Ashley's post: We created an article that explains how to make jQuery work in JavaScript triggers after its removal in Storyline 360 on January 21, 2020. 

You can learn about the three options to reference the jQuery library directly right here!

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. 

What a retrograde step. Just lost a few hours trying to figure out why my player backgrounds were not working. Seriously if you are going to do this to customers, you could at least add a warning message for files with Execute Javascript triggers. And we STILL can't edit the player colours!

So, David. Have you figured out a workaround that can work using plain javascript for this.  I agree that it's beyond annoying that you can't do even simple changes to the modern player. Somebody didn't have their thinking cap on when they created the modern player.

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.

Hi Christian, I cant find nothig similar to this

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

in my output.min.css file.

Some clue?

Thanks

Hello Everyone,

I'm happy to return with some exciting news! 🗞

Storyline 360 Update 54 is here, and it introduces several features and bug fixes! Here's the item you'll be interested in:

New: Brand your courses by choosing a custom background color for the modern player.

Just launch the Articulate 360 desktop app on your computer and click the Update button for each application—details here.

Please let us know if you have any questions or reach out to our Support Engineers directly!