Storyline 3 - Player.css
Jun 30, 2017
By
Bridgitte Li
Hello,
I was wondering if anyone had any idea where I might find (or if it still exists) the player.css file within a published storyline 3 SCORM package.
Our eLearning content has a black background/theme. Feedback from the end user population indicates that the default loader animation is hard to see. With the player.css file, I was able to include a modified loader that had some colour and would therefore standout against our black background. I know storyline 3 is still relatively new, but any guidance or suggestions would be greatly appreciated!
Thanks!
5 Replies
Hi Bridgitte,
Making changes to the published output files isn't something I can help with - but if it can be done, I suspect someone here in the community will pop in to help!
Best of luck with your project!
Thanks for writing back Ashley. Do you know if there's any other way to manipulate or change the colours of the loading icon? The black / dark grey won't work with our template :(
Unfortunately I don't, Bridgitte - but you're in good hands with the E-Learning Heroes community!
Hi Bridgitte,
This is a late response but hope it can help someone searching the web.
In Storyline 3, changing the course loader icon is very tricky. I am not a super expert and it took me a while to understand it.
What I discovered (mainly focused on HTML5 output):
- The loader is not the typical physical image file you can find in a SCORM/xAPI package but a SVG coded image embedded in your "story_html5.html" file in the CSS class ".slide-loader".
- What I did was to create the new image in Illustrator to keep my image vectorised, ie. small and faster to load.
- Then, I encoded (base64) the image using a URI Generator (in my case I used https://dopiaza.org/tools/datauri/index.php)
- Eventually, I copied the code generated and replaced the attribute 'background:transparent url' in the class ".slide-loader" mentioned before. I saved it and zipped the package to see result in the LMS.
Note: the existing loader CSS class uses animation attributes to rotate the image. You can keep it, remove it or replace it. In my case I removed the existing animation -in all the browser engines variants- and embed it in the SVG file using the <animation> methods (good reference manual https://css-tricks.com/guide-svg-animations-smil/). Doing so I managed to animate different elements of the image instead of the whole image.
I know this is not an easy to implement solution but worked for me. Any suggestion will be very appreciated.
Cheers,
Pablo.
PS: Find attached the SVG image I used as loader. It is the coach's avatar with a progress bar (standalone-animated) and some text to manage waiting time with a heavy learning assets in the beginning.
Hi again,
I forgot to mention that this loader will be used not just in the beginning of the course but all the waiting times from slide to slide.
Cheers,
Pablo.
This discussion is closed. You can start a new discussion or contact Articulate Support.