Modern Player in Storyline 360 looks great. We would like to use it. But unfortunately, the courses have to conform to brand standards. Is there a way to change to background color instead of just dark or light mode? Thanks.
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.
Free sign-up and they have a method to change the colors in the Modern Player. I am in no way affiliated with ClueLabs, I just thought this might help you.
Thank you for the reply ! Ok that is good to know !
I don't really know how to due that though, I just simply copied and pasted the code of David from the past messages 😄 But I'll try figure it out, thank you !
Thanks for the advice! I used the code of this website to have a full screen module, it worked fine until the last Storyline 360 update. I guess they'll figure out what to change in the code to make it work again.
@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.
We’re always on the lookout for new security concerns and ways to counteract them. Since jQuery has the potential to be exploited and Storyline 360 no longer uses it, we removed jQuery from Storyline 360 on January 21, 2020. If you’re comfortable with jQuery, you can still use it to write custom JavaScript triggers. You just need to reference the jQuery library directly.
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!
But what are these security concerns? I believe the last security vulnerability was prototype pollution, which was patched in May last year. The last major security concern was 3 years before that. jQuery is still actively maintained and if articulate kept jQuery updated there would be no concerns. So I ask again exactly what security concerns are Articulate addressing?
Why was there no consultation or warning that this was going to happen so that we could prepare for it?
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
I wanted to update this discussion related to an issue reported where using jQuery selectors / jQuery's $.ajax() function in JavaScript trigger no longer works.
We're always on the lookout for new security concerns and ways to counteract them. Since jQuery has the potential to be exploited and Storyline no longer uses it, we removed jQuery from Storyline 360 and Storyline 3. If you're comfortable, you can still reference the jQuery library directly to write custom JavaScript. Here's how:
65 Replies
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.
Check out www.cluelabs.com.
Free sign-up and they have a method to change the colors in the Modern Player. I am in no way affiliated with ClueLabs, I just thought this might help you.
Hello Leslie,
Thank you for the reply ! Ok that is good to know !
I don't really know how to due that though, I just simply copied and pasted the code of David from the past messages 😄 But I'll try figure it out, thank you !
Hello Michael!
Thanks for the advice! I used the code of this website to have a full screen module, it worked fine until the last Storyline 360 update. I guess they'll figure out what to change in the code to make it work again.
@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 David,
We’re always on the lookout for new security concerns and ways to counteract them. Since jQuery has the potential to be exploited and Storyline 360 no longer uses it, we removed jQuery from Storyline 360 on January 21, 2020. If you’re comfortable with jQuery, you can still use it to write custom JavaScript triggers. You just need to reference the jQuery library directly.
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!
But what are these security concerns? I believe the last security vulnerability was prototype pollution, which was patched in May last year. The last major security concern was 3 years before that. jQuery is still actively maintained and if articulate kept jQuery updated there would be no concerns. So I ask again exactly what security concerns are Articulate addressing?
Why was there no consultation or warning that this was going to happen so that we could prepare for it?
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.
This post was removed by the author
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!
I wanted to update this discussion related to an issue reported where using jQuery selectors / jQuery's $.ajax() function in JavaScript trigger no longer works.
We're always on the lookout for new security concerns and ways to counteract them. Since jQuery has the potential to be exploited and Storyline no longer uses it, we removed jQuery from Storyline 360 and Storyline 3. If you're comfortable, you can still reference the jQuery library directly to write custom JavaScript. Here's how:
https://articulate.com/support/article/Storyline-How-to-Reference-the-jQuery-Library
However, keep in mind that some JavaScript triggers, like the one you mentioned, that worked before might not work in newer versions of Storyline.