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

Testing this now and indeed in the latest update i really get a lot of error-messages and a CORD/CORS message on Review. Gonna dive into this.

Thank you! 

Many greetings from Switzerland

Hello,

are there any news concerning this problem?

I choose a title image or the start slide in the player and black borders remain when I place the Storyline file in my Rise Course.

I choosed the light player design, turned off all features in the player and then turned of the modern player itself.

What can I do?

Thank you very much and many greetings
Corinna

Hi Corinna, 

Thanks so much for reaching out!

We don't have any updates to share at this time. I have added your voice to this request. We'll be sure to update this thread with any news. Just as a reminder, you can see how we handle bugs here: How we tackle bugs.

Have you tried any workarounds suggested in this thread by community members? Perhaps that could do the trick for your project!

Hi Luciana,

thanks a lot. I didn't try the workarounds so far, because the others told, that there were error-messages in the latest update, but I will try nevertheless.

You're welcome, Corinna! 

Fingers crossed that the workarounds are a help for your authoring at this time. 

If any other discoveries or questions come up, feel free to reach out in the community!  

Hi, everyone!

I have some great news to share! We just released another update for Storyline 360. In Update 77, we've included important fixes and new features.

One of the enhancements we've included: 

• Set your cover photo to fill the player frame. Enable it in the player properties.

Launch the Articulate 360 desktop app on your computer to take advantage of this update, and click the Update button next to Storyline 360. You'll find our step-by-step instructions here.

Please let me know if you need additional help!