Add background color of body to html

[d.bernaert]

Hi,

On this page (https://medium.com/appscope/designing-native-like-progressive-web-apps-for-ios-1b3cdda1d0e8) is stated that with this meta tag you can specify the color to be used by IOS for the header of a web application.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

It then uses the background color of the body element.

How can I set a background-color of the body element?

Thx,

Doominique

[Sherzod]

Hi Dominique,

This post may help you:

 

[d.bernaert]

Thx Sherzod,

Thx, but that does not seem to work on Safari.

Safari needs this in the custom meta <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

And it will apparently take over the background-color of the body of the application then.

So I would need to put the background-color of the body of the main form I think.

Dominique

[alfr]

Hi, 

You need to add them in the servermodule - as "CustomMeta"

For it to work you then as well need to add the url/web app on the home screen - and start the webapp from the homescreen

Alf

[d.bernaert]

Hi,

I've added the following meta to the servermodule:

<meta name = "theme-color" content = "#1B3766"> <!-- icons --> <link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="20x20" href="files/images/ios/AppIcon.1.0/Icon-20x20@1x.png"> <link rel="apple-touch-icon" sizes="40x40" href="files/images/ios/AppIcon.1.0/Icon-20x20@2x.png"> <link rel="apple-touch-icon" sizes="60x60" href="files/images/ios/AppIcon.1.0/Icon-20x20@3x.png"> <link rel="apple-touch-icon" sizes="29x29" href="files/images/ios/AppIcon.1.0/Icon-29x29@1x.png"> <link rel="apple-touch-icon" sizes="58x58" href="files/images/ios/AppIcon.1.0/Icon-29x29@2x.png"> <link rel="apple-touch-icon" sizes="87x87" href="files/images/ios/AppIcon.1.0/Icon-29x29@3x.png"> <link rel="apple-touch-icon" sizes="80x80" href="files/images/ios/AppIcon.1.0/Icon-40x40@2x.png"> <link rel="apple-touch-icon" sizes="120x120" href="files/images/ios/AppIcon.1.0/Icon-40x40@3x.png"> <link rel="apple-touch-icon" sizes="120x120" href="files/images/ios/AppIcon.1.0/Icon-60x60@2x.png"> <link rel="apple-touch-icon" sizes="180x180" href="files/images/ios/AppIcon.1.0/Icon-60x60@3x.png"> <link rel="apple-touch-icon" sizes="76x76" href="files/images/ios/AppIcon.1.0/Icon-76x76@1x.png"> <link rel="apple-touch-icon" sizes="152x152" href="files/images/ios/AppIcon.1.0/Icon-76x76@2x.png"> <link rel="apple-touch-icon" sizes="334x334" href="files/images/ios/AppIcon.1.0/Icon-83.5@2x.png"> <!-- fullscreen webapp --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-title" content="Roelants"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <link rel="apple-touch-startup-image" href="files/images/ios/AppIcon.1.0/launchimage.png"> <link rel="apple-touch-startup-image" sizes="640x960" href="files/images/ios/AppIcon.1.0/LaunchImage_640x960.png"> <link rel="apple-touch-startup-image" sizes="320x480" href="files/images/ios/AppIcon.1.0/LaunchImage_320x480.png"> <link rel="apple-touch-startup-image" sizes="640x1136" href="files/images/ios/AppIcon.1.0/LaunchImage_640x1136.png"> <link rel="apple-touch-startup-image" sizes="1334x750" href="files/images/ios/AppIcon.1.0/LaunchImage_1334x750.png"> <link rel="apple-touch-startup-image" sizes="750x1334" href="files/images/ios/AppIcon.1.0/LaunchImage_750x1334.png"> <link rel="apple-touch-startup-image" sizes="828x1792" href="files/images/ios/AppIcon.1.0/LaunchImage_828x1792.png"> <link rel="apple-touch-startup-image" sizes="1125x2436" href="files/images/ios/AppIcon.1.0/LaunchImage_1125x2436.png"> <link rel="apple-touch-startup-image" sizes="2208x1242" href="files/images/ios/AppIcon.1.0/LaunchImage_2208x1242.png"> <link rel="apple-touch-startup-image" sizes="1242x2208" href="files/images/ios/AppIcon.1.0/LaunchImage_1242x2208.png"> <link rel="apple-touch-startup-image" sizes="1242x2688" href="files/images/ios/AppIcon.1.0/LaunchImage_1242x2688.png"> <link rel="apple-touch-startup-image" sizes="1792x828" href="files/images/ios/AppIcon.1.0/LaunchImage_1792x828.png"> <link rel="apple-touch-startup-image" sizes="2436x1125" href="files/images/ios/AppIcon.1.0/LaunchImage_2436x1125.png"> <link rel="apple-touch-startup-image" sizes="2688x1242" href="files/images/ios/AppIcon.1.0/LaunchImage_2688x1242.png">

I've added the shortcut to the home screen again and I still get the following result.

[alfr]

Not sure I exactly understand what you say is your problem. You wrote Safari. But the header is very white and doesn't look like Safari? Also there is perhaps also a mixup between the  theme-color and apple-mobile-web-app-status-bar-style? (Also your end comment characters look a bit different, but perhaps only in the post?  "-->" instead of-- >?)

To my understanding the theme-color is not supported by Safari but by Chrome on Android. 

 

Safari

On Safari/iPhone, you can make the status bar more be a part of the WebApp by the following meta setting - as I wrote earlier in my first post.

So if your problem is Safari - that your status bar is not the correct color, (if it's white and not blue), also take a look at the color settings in the server module - change the properties BgColor and BgColorlogin to your color/ clblue / $1B3766. (And when active - do a new link on the homepage to the app). (I assume you have the correct back color on your forms/pages...)