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
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)
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.
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.
9 Replies
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
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 :)
I have a background in Web development so could probably handle this. I'll have to see us any cases crop up.
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.
Thanks for your very helpful and detailed reply, Joey :)
I for one would love to be able to use CSS and DIV-tagging (id etc.) with elements in Storyline.
Hi Tony! Please feel free to submit a feature request for this. :)
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.
Thank you Joey, i found this very helpful
This discussion is closed. You can start a new discussion or contact Articulate Support.