➤ black html5 page background on mobile browsers
May 26, 2017
Hi there,
I'm testing SL3,
and I encountered an issue with the look & feel of the mobile version of the published content inside every mobile browser:
the HTML5 page background (the background behind the player) is always black if viewed in a mobile browser;
there is no consistency between the colour you set as background in the PLAYER tab inside Storyline 3 and what the mobile browser shows,
the background will always be black.
Instead, if viewed on a desktop browser (tested with chrome, ie, edge, firefox), if you set a white background in SL3, the desktop browser correctly shows a white background, so all fine.
Here's an example of a published HTML5 project with a seamless player
(https://articulate.com/support/article/how-to-create-a-chromeless-player-sl2)
and a white background colour set in the PLAYER tab (in Storyline 3),
have a look:
http://176.126.243.189/black/
try opening the link with a desktop browser and then with a mobile browser.
Please note,
I have used a seamless player, but the issue can be replicated with any player xml setting.
I have published with the WEB output (but it's the same with SCORM, TIN CAN, etc),
format: HTML5 ONLY
player: SEAMLESS_WHITE_PLAYER (but the issue is replicated with all player settings)
quality: CUSTOM MAX SETTINGS
publish: ENTIRE PROJECT
We already knew that this is the expected behavior,
the responsive player in Storyline360/SL3 doesn’t support color and font properties, as stated here:
https://community.articulate.com/discussions/articulate-storyline/articulate-360-mobile-player-settings
and here:
https://community.articulate.com/discussions/articulate-storyline/black-html-page-background-on-ipad-sl3
but it would be great to have the choice to change the background colour on the mobile player as well.
The black background really impacts my design and I suppose other users.
Is there a way to change the colour of the background (showed in every mobile browser) styling the published files afterwards?
I'm not a CSS master.
Attached is the story file and the published version.
Thanks in advance.
26 Replies
The style block in the output html reads "body.is-mobile{background:black}" hence the black background suggesting the theme you project is based upon includes a black background, not just the player background
Hi Brian,
thank you for your help,
but there is no black in my theme,
check the pictures above.
That black in the mobile version (the background behind the player) is the Storyline 3 / 360 expected behavior,
the responsive player in Storyline360/SL3 doesn’t support color and font properties, as stated here:
https://community.articulate.com/discussions/articulate-storyline/articulate-360-mobile-player-settings
Has anybody found a way to change the colour of the background (mobile browser) styling the published files afterwards?
Set the background to a color like red. Save and check to make sure it's red. THEN go back and set to white or whatever color you need.
It may help. I had similiar issues when the black and white was reversed in SL3. It looked normal in the authoring tool but the published version was not.
Try this.
Still black...
If anyone wants to try and test it out,
the best way to replicate it on a desktop computer is using Firefox with the extension Go-Mobile installed and active (and then inspect the code),
because if you change the size of the screen into the mobile in the developer tools in Chrome, it doesn't trigger the mobile SL3 player, but it's just like a resized (smaller) desktop version.
Thanks
This is the new responsive mobile player there is no way to change this.
Okay, this is somewhat whiter...
definitely whiter.
Tnx ever so much!
Hi guys, I see you have come up with a solution to the black background. Can I ask what you changed in the published output to make the background white? I need to change mine to grey!
Thanks
Phil,
Apparently, I have two egos here in the community. The ZO above is from work, this is my original... Anyway, notifications go to different places, so I just saw your note.
If you download the bb.zip the two places where changes were made are:
"
Two places: body.is-mobile{background: in html5.html. Change the color to white or grey.
Then check main.min.css in html5/lib/stylesheets. Look for "background:black". If it's related to is.mobile, you probably want to change it. You can run a comparison between mine (bb.zip above) and a fresh one. The only tweak you might need is the menu. Right now it's black overlay and the menu items are black too. Those should be grey or white, depending on what your background color will be."
Thanks for taking your time to reply Zsolt and thanks for clarifying the areas that need changing. I can confirm that I have successfully changed the background colour despite what the support team say!
I just wish Articulate would allow the user to change this within the program instead.
This is considered a hack. Articulate can modify the output of these files any time and the hack would not work. I guess that's why they don't support it.
totally agree with you
Sorry, I can’t find the first place (body.is-mobile). Zsolt, could you please give me more detailled informations about where to find it? That would be great.
Just on this topic, can the border px size be reduced at all? On mobile or desktop?
Ditto the wish for an option. The black background of 360 really disrupts the look I've created in previous Storyline 2 courses. At least could we have the option when publishing or in the player setup for some basic color choices (such as white)?
Dear Zsolt, many thanks for the awesome hack!
To those who, like me, did not get it from the first try -- you actually need to replace the background:black to white at every occurance in the mentioned by you .css file, then it works on Safari browser on iPhones..
One more vote for the ability to change the black background! And thanks to those who posted workarounds in the meantime!
Hi Sherri,
Have you taken a look at the new modern player in Storyline 360? This now has an option for a light/dark background vs. the original black background you'd see in the responsive player.
Take a look at all the info on the modern player here.
Thanks for the idea, Ashley, but unfortunately, the new modern player doesn't help with my issue. My problem is that I've got a module that mimics a little app that we have, so I don't want any of the player showing. I've set a lot of the backgrounds to be transparent, and it looks and works great on the non-mobile devices, but when I play it on a mobile device, the black page background comes through and none of the onscreen text is readable. :( Any other ideas would be appreciated! ... or just a way to control the background page color.
Hi Sherri,
Is it a video that you have with a transparent background or on slide text? I'm curious, as there is an open issue where Videos with a transparent background loses transparency and is played with black background.
If you're running into something different it would help to see your .story file to take a look at settings and do some testing!
Hi Ashley -
It's not a video file. It's sort of a wizard that helps a training coach pinpoint the specific training module to help a seller improve. It works great on a computer, but if you try opening the published file on a mobile device, everything's black except for the buttons, so you can't read the text.
I fixed the issue by going back into the published folder (...> html > lib > stylesheets > main.min) and replacing "background:black" with "background:white" (a suggestion by someone earlier in this thread, I believe). That works fairly well, but it's a pain to go back and change that every time I need to make a change to the .story file. It also doesn't work 100%. I've found that often I have to open the file and click the back button before the black background goes away.
Any help would truly be appreciated! :)
Hi Sherri,
Thanks for sharing the file. I took a look and published it to my Amazon S3 account here. I tested it on my iPad running iOS 11.3 and it looked normal to me (screenshot added). The same as it was appearing on Desktop.
Can you test my link and let me know what you see? Also what mobile devices were you using?
Wow. Absolutely no problem displaying the file from your link on my devices. I wonder if it's because my browser is remembering the page color from the previous version? I wish I knew what fixed it! The devices I tested on were an iPad running iOS 11.4 and an Android Samsung Galaxy S7 phone. I used Safari on the iPad and Chrome on the phone. They should both be the latest versions.
Before I discovered the issue and saw it myself, it was reported from a trainer using an iPad and iPhone. He was also only able to view the files correctly on his desktop computer.
Thanks so much for looking at the issue. If you have any idea what might have fixed it, please let me know. The changes I made to the background page were made in the published files, so it shouldn't have affected the .story file.
Thanks!
This discussion is closed. You can start a new discussion or contact Articulate Support.