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
STEPS TO CHANGE THE STATUS AND ADDRESS BAR COLOR ON SEVERAL TYPES OF MOBILE PLATFORMS OR BROWSERS
For Chrome, Firefox OS and Opera
Simply add a
For example, to specify the theme color for Chrome on Android platform, use the
In case of Blogger, the Syntax is.
For Windows Phone
It will require a slightly different
For example,
In case of Blogger, the Syntax is.
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
Together it would be like.
In case of Blogger, the Syntax is.
We need to put both of these lines into the
Save and Test
Finally, after adding one or more of these
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.
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.
STEPS TO CHANGE THE STATUS AND ADDRESS BAR COLOR ON SEVERAL TYPES OF MOBILE PLATFORMS OR BROWSERS
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.
Comments
Post a Comment
☑ Your comment will be accepted after moderation.