How to Match WordPress theme color with Address Bar Color in Mobile Browser?

Colorize chrome header in android lollipop for WordPress theme.

Comments: 15
data:blog.title
colorize browser header

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.

android lollipop

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

header.php

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.

wordpress theme 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.  

Speak Your Mind

Info is out of this world, I would bang to see more from your writers. wordpress themes

Thanks aftab. I am very glade to hear that. keep visiting for latest articles.

Not Working on my website tallyknowledge.com

Hi Sumit Kumar, This feature is working well. I have checked it in my Smartphone. One thing this feature works on Android Lollipop and higher version. And I have added little update in script. Please add the updated code. Thank you. ;)

Anonymous 2/15/2017

Hallo Rabbi, I am sumit kumar gogawat

I am very big fan of you

As you know i already subscribe your site and want to need your help.

I want to place ad of 728*90 in my header. I know how to add but the problem is ad is not showing beside the title bar, it is showing the below title bar. will you please help me in this regard.

Thanks in Advance

Hi Sumit Kumar, I think your right header width is less than 728px or exactly 728px. For placing ad on your site's right header widget container it much be 730px - 732px width. So increase the size by editing CSS code. I hope problem will solve.
^_^

Anonymous 2/16/2017

Hallo Rabbi

Thanks for your precious advice.

I try to apply method suggested by you. but failed.

I think there is a container property which has the px code in the container.php but i also unable to found that. I am using freshlife wordpress theme. Will you please check it to your own once. Please

Hi Sumit Kumar, I don't have freshlife theme. But from demo site I have found the script that you can change to solve your issue.

This theme's width is 980px

for Logo allocated 220px width X 96px height and right header ads allocated 728px width X 90px height

So make sure your site logo width is under 220px. If you can making the widget within 200px then your problem will solve.

If you want to keep your logo and header intact then you can increase the theme width. Just locate below css script and change the width 980px with 1000px.


.container {
background: #fff;
margin: 0 auto !important;
padding: 10px 15px 0 15px;
width: 980px !important;
}


Additionally, You can find change the header css script for header ads. By default the ad size is 728px. so change the width 728px with 732px.


.header-ad {
float: right;
width: 728px;
height: 90px;
margin: 15px auto;
}


I hope your theme problem will solve now. Let me know.
Thank you. :)

Sir,

Thanks for your reply. But code provide you Still not working. I also change the code as suggested by you and also use 468*60 ad code for the place. But 468*60 is also showing the below header not beside the header.

Please once again look into the matter. Please Sir

Hi Sumit Kumar, I think your template is ok. Problem is in your ad width is 740px, so it is showing below header logo.

please locate the below script and change the width 690px


.header-ad {
float: right;
width: 740px;
height: 95px;
margin: 15px auto;
}


I have found many problem in your site. After struggling more than 5 times I have finally enter into your site. So generally people don't have much patient to enter by doing struggle. mainly for this reason your traffic and rank has gone. You should change your hosting provider as soon as possible. Hosting bandwidth is very poor. use siteground 1 years hosting + a free domain will cost you only $47. I think you are using your current hosting by $7.99 or more but that service are really bad. if you own good hosting your site performance will better again.

http://www.bloggerspice.com/2016/03/SiteGround.Web.Hosting.review.html

secondly why are you using those ads network bns and Infolinks? I think after using another 5 years you won't able to make any money. immediately change your ad network. try any 2 from below. But for best performance use single ad network.

http://www.bloggerspice.com/2016/02/AdsOptimal-best-Google-Adsense-alternative.html

http://www.bloggerspice.com/2017/01/payclick-trusted-review.html

http://www.bloggerspice.com/2016/10/make-money-with-AdNow-native-advertising-company.html


Thank you.

Hi Rabbi
Thanks again...

I know there is too many issues with my site. But my domain expired in may. And I don't want to renew. Because I don't know about a single thing of WordPress.thats why I need your help and bother you again and again. I want to restart my blogger blog which was earlier migrated into WordPress. If you help me in this regard, I want to bear your services.

Please confirm

Hi Sumit, sorry for late approval your comment. I don't know why blogger send your comment in spam comment section. Anyway, i just see and approve. It seems to me that you're a big fan of blogger. I'm always happy to help others. Don't worry go ahead, i will support you with all stuff. Thank you :)

Hi Sumit, sorry for late approval your comment. I don't know why blogger send your comment in spam comment section. Anyway, i just see and approve. It seems to me that you're a big fan of blogger. I'm always happy to help others. Don't worry go ahead, i will support you with all stuff. Thank you :)

Hallo Rabbi,

Thanks for your reply. Now i am big fan of you. Because of your supporting nature.

If you dont mind, I need your Help. I want to close my wordpress account and again switch to blogger, but the problem is i dont know how to do this or how to migrate domain from wordpress to blogger. In may my domain is expired. But i want to convert my wordpress blog now in blogger. I need your help. Please reply

I also try to contact you through your contact page but send button on your contact page is not working.

Hi Sumit, First take your whole blog backup. Hopefully I will write a tutorial for WordPress to Blogger migration process. And initially transfer your domain before expire. you can do transfer process before 30 days of domain expire. It will take 5/7 days to transfer domain. If you want to buy cheap domain then namecheap is very good. maybe it will take less than $8 for transferring a domain.

Before transferring a domain 3 things required.

1. Make your Domain Public.
2. Unlock your Domain.
3. Get the Transfer Authorization ( EPP ) Code.

those will required in your new domain seller account.

Go through below URL and from Domain menu select "Transfer"

https://goo.gl/ISDC0K

and go through according to their instruction. You will receive couple of email in your current email to give permission and instantly grant permission from your email so the transferring process will be fast. After doing all the things send me message.

Thank You. :up

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *