Custom DIV and CSS in Storyline

Feb 21, 2017

I know it's possible to use custom JavaScript in Storyline 2, but is it also possible to use custom DIVs and CSS as well?

9 Replies
Nicole Legault

Hi Nick 

Thanks for posting your question! DIVs and CSS are not something we support in Articluate software. It MAY be possible somehow by either using JS (as you mentioned) or by hacking the .html output files, but I don't know how it would be done and as mentioned, it's not something we support or have documentation for. There's always the possibility that someone else in the community may have figured out a way to get it done, and if they do, hopefully they will leave you a comment here :) Sorry can't be more helpful! Best of luck with your project :D

Joey Buys

Hi Nick,

Nicole was spot on with her response. It is indeed possible to do if you change the .html files as well as the .css files. There are a LOT of elements that you can customize in this manner (for instance you can make the player transparent, add a background image that fills the entire screen - even outside the player and even change the loading icon to a custom one). 

 There are two issues when using this method though:

 1. It is extremely high maintenance and requires a lot of time the first time to figure out where the elements are that you want to change. A sound understanding of HTML, JavaScript and CSS is a must for this approach.

2. Everytime you publish the content you will have to manually make these changes again as the files will be overwritten. This requires you to document all the changes that you make and where you made them. There are numerous files that you have to edit to get to all the features (story.html, story_html5.html, player.css)

Hope this helps :)

Dave Cox

Hi Nick,

If you are publishing to HTML5, then it is HTML5, with all that that entails. So, yes you could create any custom content that you want with HTML5, CSS, Javascript, etc. But is it advisable? Well, you have to be the judge of that for your content. If you are doing more than just minor modifications, it might be better to just go ahead and develop your content in HTML5 verses the Articulate tool.

OWEN HOLT

With HTML 5, the sky is the limit. 

I recently posted instructions on how to use StoryLine to create multiple "custom" .css files and then use JavaScript to change the .CSS being used by the player from within a published project.

You can read about it here.

This is just one example to inspire you but I'm sure there are many more use cases.

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