Change the background of the cover photo from black to white in the Articulate Storyline Player

Thanks for reaching out and sharing that screenshot, Thomas!

We have logged this as a possible bug where a cover photo shows black bars at the top and bottom regardless of whether the player controls are disabled. 

I've added this discussion to the report, so you'll get notified when we have any updates: How we tackle bugs.

Thank you very much! I look forward to your notification.

Hello Becca Levan

Any news?

The storyline code automatically sets the background to black.

.view-phone .mobile-start-overlay {
background: #000;
}

How do I have to change the code so that a white background appears?

Best regards
Thomas Koch

Either fix the CSS in your Articulate folder before publishing, or when done publishing change it..

Thanks for the answer.

How exactly does the code have to be called so that the surface is white?

Is there a tutorial?

When will Articulate release a bugfix?

The manual modification of many stroline files is very laborious.

Thank you very much

.view-phone .mobile-start-overlay {
background: #fff;
}

And its white...  but you have to fix that in the CSS Articulate uses.

As the CSS Articulate uses is in...
C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\stylesheets
you need to get these files and unminify them and fix what you need...
This url properly unminifies the CSS to readable format...
https://www.unminify2.com/
Then you can find whats needed... .view-phone and/or .mobile-start-overlay class and fix it so its white... or whatever color you like...

.mobile-start-overlay {
background: #fc00ff;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0
}

Save it somewhere and replace the original file and your mobile start overlay is not black anymore.

You probably need to do it in both CSS files. desktop.min.css and mobile.min.css

Math Notermans, you are the best. Thank you very much and greetings from Switzerland

Dear Math Notermans

Inserting the parameter works.

.view-phone .mobile-start-overlay {
background: #fff;
}

Unfortunately, the changes in Storyline are not accepted: C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\stylesheets

.mobile-start-overlay {
background: #fc00ff;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0
}

The changes do not affect the export.

Do you have an idea how to change the export in Storyline?

Best Reagards
Thomas Koch

Thank you! 

Many greetings from Switzerland