Adjusting colors and images using variables

I am trying to customize my courses by changing colors and images based on variables.  I am passing the color codes and image names into the course and using javascript to transfer those pieces of information to storyline variables.

I cannot figure out how to change the colors of text or shapes to the values of the variables.  Maybe this is not possible.  I was hoping that I would be able to change the default palette using javascript so that the new colors would be translated throughout the course.

As for the image, I tried inserting a placeholder image with the intent of using javascript to swap it out for the image that I really want.  In this case, all of the alternate images would be in the same directory on the server so all I would need to do is change the file name.

Is any of this possible?  I've seen other threads where they suggest using states but that won't work.  States would allow a certain number of preset color options, but would not allow for changing the color specifically to a client's brand.

Thank you in advance for your help.



6 Replies
Ben McKenna

Hey Douglas,

As far as modifying elements through the DOM using Javascript, Storyline makes it a bit of a pain. Math Notermans came up with a pretty ingenious solution for identifying elements using accessibility labels. Using this method I managed to get it sort of working...

Slide view:

Javascript that runs on timeline start:

Published view:

I don't know your situation, but generally this kind of stuff is easier to achieve and maintain using master slides and/or theme colours.

Douglas Opicka


This is very helpful.  You are correct, I would like to do this via master slides and theme colors.  Doing so will allow me to quickly change all colors at once and change the image in one spot.  It would not be practical to execute javascript on every page to change the colors and images to match brand color scheme.  Does the method you outlined work to update the color theme and images on the master slide so that the script only has to be executed once?