How to Customize the Status & Address Bar colour of a Mobile Device for a particular Website or Blog

For a website or blog’s mobile presentation we can easily customize or change the address bar (of the mobile browser) and status bar (of the mobile platform) color as per our liking. There is a plethora of simple tweaks that can be done to the website’s or blog’s theme or template to basically increase engagement and bring back visitors to our site.

Personalizing our website’s mobile view is thus important to make it more enthralling to the eyes of our visitors and to greatly enhance the user experience.

By using different meta elements, or by adding <meta> tags one can easily customize the browser and even certain elements of the mobile platform (like the status bar). However, we need to keep in mind one thing that this might work on certain mobile platforms (like Android or iOS) or browsers only.



For Chrome, Firefox OS and Opera

Simply add a <meta> tag to the site’s <head> section with the name = “theme-color” and set the content to any valid CSS color.

For example, to specify the theme color for Chrome on Android platform, use the meta tag as.

<!-- Chrome, Firefox OS and Opera -->
<meta name = “theme-color” content = “#009688”>

In case of Blogger, the Syntax is.

<!-- Chrome, Firefox OS and Opera -->
<meta content='#009688' name='theme-color'/> 

Screenshot of using custom theme in Blogger

For Windows Phone

It will require a slightly different <meta> tag name. Just add a <meta> tag in the same place as described above on a separate line with the name = “misapplication-navbutton-color” and the content to any valid CSS color.

For example,

<!-- Windows Phone -->
<meta name = "msapplication-navbutton-color" content = "#009688">

In case of Blogger, the Syntax is.

<!-- Windows Phone -->
<meta content='#009688' name='msapplication-navbutton-color'/>

For iOS Safari

Here there are only 3-options available for us to use.

+ ‘default’ – the Status bar is normal.
+ ‘black’ – the Status bar has a black background.
+ ‘black-translucent’ – the Status bar floats on top of the full screen content, rather than pushing it down. This enables the web content to be displayed on the entire screen, but is partially obstructed by the status bar on top. The <meta> tag to handle this appearance won’t work unless we first specify the full screen mode by using <meta name="apple-mobile-web-app-capable" content="yes">.

Together it would be like.

<!-- iOS Safari -->
<meta name = "apple-mobile-web-app-capable" content = "yes">
<meta name = "apple-mobile-web-app-status-bar-style" content = "black or black-translucent">

In case of Blogger, the Syntax is.

<!-- iOS Safari -->
<meta content=’yes’ name=’apple-mobile-web-app-capable’/>
<meta content=’black-translucent’ name=’apple-mobile-web-app-status-bar-style’/>

We need to put both of these lines into the <head> section as above. For more information, refer to the Apple Developer’s Page ⎘.

Save and Test

Finally, after adding one or more of these <meta> tags to the <head> section, hit on the Save button and the open the site on the desired mobile device. Thereafter make sure the additions took effect i.e. now whether you are able to see the custom color in the status and address bar area of your phone or tablet.

If you are stuck anywhere in the process and need some help, feel free to let me know via comments. If you find this tutorial useful, do share it with all.