I have seen various discussions from years ago around this topic, but never saw a solution coming from Articulate, so giving another try.
When I publish SCORM files on my LMS, depending on the size of the window, or if I'm on mobile, a black frame appears around my SCORM, even if I set the background colour to white in my Storyline 360 Player settings.
How can this be avoided?
See attached image for reference with yellow markings on the black area I want to get rid of.
Basically this is set in the html and css files Articulate uses to publish a project in Storyline360. These 2 lines of Javascript code do the trick.
/* You always need to select an element. In this case the body. With the browser tools you can find the element you want to target */ let StorylineBg = document.querySelector("body");
//As GSAP is buildin to SL360, its easy to set the color gsap.set(StorylineBg, {backgroundColor:"#F29455"});
Offcourse you can change anything this way. Just test and see with the browser tools and the console.
Thanks Math! This is great! I tested it and it does change the background colour BUT not on mobile device :( apparently there is somewhere hidden in Storyline 360 a CSS that gives background colour black when viewed on mobile devices.
Do you know how this can be changed? Usually the first time I view it I see the new background colour but then it goes back to black frame.
See attached the screenshot of what I mean. Any ideas?
I see what you mean...lets see if we can manage to change that too. Apparently it is in mobile.min.css First gonna check Articulate folder whether its there. Yeah its there...you can change the minified css in your Articulate folder.. and then it will work
If you change the css rule in that file to this... body.theme-classic.view-mobile { background: #ffffff00 !important }
It will be white and transparant. Offcourse you can use any color instead. With GSAP you also can override CSS ,but im not sure whether it will work with rules set as 'important'. In fact that is bad webdesign to start with from Articulate. Hard to override rules that are set as !important.
Im gonna do a test to see whether i can override it with GSAP, because thats better and more flexible.
PS. Added my edited mobile.min.css file
The folder it should be in is like this: C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\stylesheets
5 Replies
Basically this is set in the html and css files Articulate uses to publish a project in Storyline360.
These 2 lines of Javascript code do the trick.
/*You always need to select an element. In this case the body.With the browser tools you can find the element you want to target*/let StorylineBg = document.querySelector("body");//As GSAP is buildin to SL360, its easy to set the colorgsap.set(StorylineBg, {backgroundColor:"#F29455"});Offcourse you can change anything this way. Just test and see with the browser tools and the console.
Here is a sample.
https://360.articulate.com/review/content/573381aa-467f-45be-83b3-ce97324b8fe4/review
And the Storyline attached.
Thanks Math! This is great! I tested it and it does change the background colour BUT not on mobile device :( apparently there is somewhere hidden in Storyline 360 a CSS that gives background colour black when viewed on mobile devices.
Do you know how this can be changed? Usually the first time I view it I see the new background colour but then it goes back to black frame.
See attached the screenshot of what I mean. Any ideas?
Many thanks again!
Amaia
I see what you mean...lets see if we can manage to change that too.
Apparently it is in mobile.min.css First gonna check Articulate folder whether its there.
Yeah its there...you can change the minified css in your Articulate folder.. and then it will work
If you change the css rule in that file to this...
body.theme-classic.view-mobile {background: #ffffff00 !important}It will be white and transparant. Offcourse you can use any color instead.
With GSAP you also can override CSS ,but im not sure whether it will work with rules set as 'important'. In fact that is bad webdesign to start with from Articulate. Hard to override rules that are set as !important.
Im gonna do a test to see whether i can override it with GSAP, because thats better and more flexible.
PS. Added my edited mobile.min.css file
The folder it should be in is like this:
C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\stylesheets
Thanks! But it didn't seem to work for me :(