That's an interesting idea! I'm not sure I've run across a request for a custom preloader before here in the forums, so this might be a good one to pass along to our development team in the form of a feature request. Feature requests from customers like you contribute to our product roadmap, so thanks for letting us know what you'd like to see.
Yes, it's possible to do this. One would need to make some slight adjustments to the published folders, so a basic knowledge of css is required. Try this:
1. Create your custom icon as a GIF – I find GIFs tend to work.
2. Save this icon into the same folder as the player.css file – this is usually in the mobile folder.
I'm not too sure what the 360 output looks like. Although, if it is publishing in HTML5, there must be a .css file somewhere. Any 360 users out there know where to find the .css file?
Hi Daniel. I was very excited to find this article with your instruction on using a customized preloader. I cannot find the player.css in the Articulate Storyline 360 published output. Any way you may be able to assist? It doesn't look like there has been any resolve on this as of yet. Thank you.
Same issue - I use Storyline 360, and there isn't any player.css (only output.min.css and main.min.css). Beside the preloader, now I can't customize the look by changing the player.css file.
in SL360 the player.css is integrated inside the mobile.min.css and desktop.min.css.
If you search these css files when published for background:url(data:image/png;base64, you will find it.Alas those css-files are minified and thus not good readable. You can make them better readable by using a prettifier like this one..
17 Replies
Hey Jonathan!
That's an interesting idea! I'm not sure I've run across a request for a custom preloader before here in the forums, so this might be a good one to pass along to our development team in the form of a feature request. Feature requests from customers like you contribute to our product roadmap, so thanks for letting us know what you'd like to see.
I have done that this morning, thanks for the suggesting Alyssa
Thanks for taking the time to submit it, Jonathan!
Has anything come of this? I would also like to make a custom preloader.
Hello Rachel and welcome to E-Learning Heroes :)
You are welcome to share your request as well as use-case for this feature as well. Just send it in to our team here.
Hi guys,
Yes, it's possible to do this. One would need to make some slight adjustments to the published folders, so a basic knowledge of css is required. Try this:
1. Create your custom icon as a GIF – I find GIFs tend to work.
2. Save this icon into the same folder as the player.css file – this is usually in the mobile folder.
3. Open the player.css.
4. Search (ctrl+f) for loading.
5. Delete the following...:
{
background: transparent url(data:image/png;base64,… Jggg==) no-repeat 0 0;
}
...and replace with.
{
background: transparent url('yourcustomeloadername.gif') no-repeat 0 0;
}
6. Comment out the rotation parameters - /* */ - if you don’t want it.
7. Voila.
Hi! Thanks for the welcome, I've been around for a while but start a new profile every time I get a new job/email address!
Daniel, I'm using Storyline 360 and don't have a player.css file in my web export. Do I need to publish to a different setting for this?
Oh no Rachel! You should be able to manage your account here if needed.
Different companies have paid for different licences, so don't think I can tie together all of my old accounts...
Ah, gotcha Rachel :) I misunderstood.
Hi Rachel,
I'm not too sure what the 360 output looks like. Although, if it is publishing in HTML5, there must be a .css file somewhere. Any 360 users out there know where to find the .css file?
Dan
Hi Daniel. I was very excited to find this article with your instruction on using a customized preloader. I cannot find the player.css in the Articulate Storyline 360 published output. Any way you may be able to assist? It doesn't look like there has been any resolve on this as of yet. Thank you.
I don't use Storyline 360 so I'm not familiar with the published output. Check in the mobile folder.
Hi ,
I use storyline 3 and there isn't any player.css file in my scorm output.
Any one can help me?
Same issue -
I use Storyline 360, and there isn't any player.css (only output.min.css and main.min.css).
Beside the preloader, now I can't customize the look by changing the player.css file.
in SL360 the player.css is integrated inside the mobile.min.css and desktop.min.css.
If you search these css files when published for
background:url(data:image/png;base64,you will find it.Alas those css-files are minified and thus not good readable. You can make them better readable by using a prettifier like this one..
https://www.prettifyjs.net/
This discussion is closed. You can start a new discussion or contact Articulate Support.