This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Jesse Mainee
Posted Feb 07 - Read on Facebook

Anyone know how to change the status bar color when previewing on device? Or remove it completely?

13 Comments

Stephen Crowley

For iOS, add meta tag on the index.html <meta name="apple-mobile-web-app-status-bar-style" content="white">

Jesse Mainee

Thanks Stephen Crowley could I do that within framer studio with coffee script though? Sorry, should have been more specific with my question.

Stephen Crowley

ok, i'm honestly not sure how successful this will be within framerstudio but in javascript you'd do something like:

Stephen Crowley

var meta = document.createElement('meta'); meta.name = "apple-mobile-web-app-status-bar-style"; meta.content = "white"; document.getElementsByTagName('head')[0].appendChild(meta);

Stephen Crowley

even then, I'd just write the meta tag so you don't have page rendering issues

Jesse Mainee

Sweet, I'll give it a go. Thanks!

Joshua Tucker

Stephen Crowley Did not know this. This is awesome! Thanks for sharing.

Jesse Mainee Another option for you is to edit the index.html file directly like so. Go into your project folder (name_of_project.framer) and open up index.html in say Xcode or another code editor of some kind.

The line highlighted in my screenshot shows the line. Change it from "black-translucent" to "white".

Jesse Mainee

Hmm, doesn't seem to have any effect when editing the index file. I'm using a nexus device with lollipop if that makes any difference, not sure. I'm sure there must be a way though

Joshua Tucker

Jesse Mainee I presume your file probably says something related to nexus in your index.html right? Could you send a screenshot?

Jesse Mainee

Fixed. I added <meta name="theme-color" content="#53A6DC"> to index.html. Works like magic. Thanks guys.

Joshua Tucker

Jesse Mainee Glad you got it working!

Jordan Robert Dobson

That's right android has different meta tags for status bar. :)

Stephen Crowley

Yup

Read the entire post on Facebook