Customize color of Storyline 360 player buttons using JavaScript.

Nov 05, 2019

I have done the customization in Storyline 360. I used JavaScript for that.

Following customization are possible in Storyline 360:

  • Change player background color.
  • Change player button icon colors.
  • Change next button color when timeline ends of particular slide, whenever you want to change color of next button. 


5 Replies
Developer 01

Below is the JavaScript to change color of next botton:

You can execute the JavaScript whenever you want.

$(".next-icon path").css("fill", "#e31f26")

Here is the script for change background color of 360 player:

$(".top-ui-bg").css("background-color", "#e8e8e8");
$(".area-primary").css("background-color", "#e8e8e8");
$(".cs-slide-container").css("background-color", "#e8e8e8")

Please use above script in slide master.

You can also add more css classes in JavaScript to change color of particular icon. 

Thi Nguyen

Hi Multiversity Developer 01, 

Thank you for your great sharing!

Do you know how to change the text color to white when the user hovers the mouse over an active tab on the left sidebar? 

As you can see as the pic below, when I hover over the Menu tab, "Menu" text is hard to read. Unfortunately, we have to keep Tab>Hover and normal text colors are grey as it in the pic and Selected text color currently is White. 

I want to change the Tab>Hover/ Text color to white only when I hover over the tabs.

Thanks so much.




This discussion is closed. You can start a new discussion or contact Articulate Support.