Recently, One of the users has approached me asking the steps for the same. This is considered as one of the branding tricks. If you notice, many of the popular websites are using this tweak to match the address bar color with its brand logo, which will attract the users. There are way too many to list here, but you get the idea.Īs always, your feedback is more than welcome.In this guide, I would like to share a simple tweak which will allow you to customize the Chrome Address Bar Color for your website. Other than the color of the address bar, you can customize many other things on different mobile device like allowing the site to work as a Web App in Full-screen mode, or enabling / disabling automatic detection of possible phone numbers in a webpage in Safari on iOS. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.
black-translucent – the status bar is black and translucent.Īnd also if set to default or black, the web content is displayed below the status bar. black – the status bar has a black background. default – the status bar appears normal. on Safari, you cannot specify the exact color, but instead you can use:. 
msapplication-navbutton-color meta tag also works for desktop IE pinned tabs. On Android, the color you set above is applied to Google Chrome address bar and darker 700 tint of same color is applied to Android navigation bar every time someone visits your website. Once you do that, check out your site with Google Chrome on your mobile device.ĭoing it Like a Pro: If you want to make this even simpler then use “Clone Snippet” button above, click the code tab, and just change the color and update the code, done once again (but this time like a pro). Code TabĪll that is left for you to do is simply copy the generated code snippet and paste it in you theme’s functions.php file. View snippet Clone snippet Download snippetĬhange the color’s HEX Code to match your desired color on line 1, then click the Update Code button - and you are done. Next, click the Code tab and paste in the following code: Assign your Callback Function a name (I used address_mobile_address_bar, but you could obviously use anything you’d like). 
So lets get started by heading over to the Hooks Generator, then click the “Hook” tab: And as an added bonus (on Android only) the color assignment follows all the way to the multi-task app switcher:
0 kommentar(er)
