How to Match WordPress theme color with Address Bar Color in Mobile Browser?
If you present your WordPress theme beautifully with match
color combination in mobile browser then it will help to create a brand color
on smart device. I am not sure that have you noticed about BBC, The Gurdian,
Facebook all of them are displaying with brand color on mobile browser. Every
website has its own brand color and visitors can recognize known website easily
by exploring color combination.
There are many branded color using for website such as
Green, Blue, Red, Orange, purple and the colors helps to recognize the site
easily. And it creates a color brand on visitor’s mind.
Why should we match the address bar color on Mobile browser?
Recently over 60% readers using Smartphone for visiting
websites. Even in case of BloggerSpice I am receiving 70% readers from mobile
devices. But when readers visit blog or website from Smartphone then they feel
this is not a part of Smartphone. For example when we open an App in Android
device then you will see same color on whole screen. And if you match color for
your WordPress theme then visitors will fell like native app. As a result, it
will improve user experience, and for e-commerce site it will help to increase
conversion rates.
I know you are feeling excited and want to add this on your
WordPress theme. Don’t worry in this tutorial I will show you how to do it? But
note that it will only work on Google chrome web browser on Androind devices. I
have checked on Android Kitkat but it works better on Android Lollipop and on updated
version.
Applying the Trick on WordPress Them?
To make it works we will use a simple HTML META tag and this
is very easy to add. This META tag use to change address bar color in Google Chrome
mobile browser on Android OS. However you can use any hex color for matching
the browser color. For matching the color just use our color picker and select
hex color code and proceed to the below steps-
Step 1 Log in to your WordPress account and
go to Dashboard
Step 2 From Dashboard click on ->Appearance->Editor
Step 3 Now locate header.php or Child Theme’s header.php file
from the right column and instantly header.php file will open in Editor
Step 4 Now add the following line just above the closing </head>
<meta name="theme-color" content="#0090FF"/>
<meta name="msapplication-navbutton-color" content="#0090FF"/>
<meta name="apple-mobile-web-app-status-bar-style" content="#0090FF"/>
Customization
- Please alter #0090FF with your theme’s color code.
Step 5 Finally click Update
File button from the bottom or Editor.
Everything
is done. And to see it live please open your WordPress site on Android device
and see the result.
I
hope it is working perfectly. And if you like this tutorial please subscribe to
our VIP Mail list to get the latest content notification. Thank you.