Home

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

BloggerSpice
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.  
Tags:

24 Comments

  1. judden jout
    Info is out of this world, I would bang to see more from your writers. wordpress themes
    • BloggerSpice
      Thanks aftab. I am very glade to hear that. keep visiting for latest articles.
    Reply
    Reply
  2. Tally Knowledge
    Not Working on my website tallyknowledge.com
    • BloggerSpice
      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. ;)
    Reply
    Reply
  3. 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
    • BloggerSpice
      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.
      ^_^
    Reply
    Reply
  4. 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
    • BloggerSpice
      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. :)
    Reply
    Reply
  5. Tally Knowledge
    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
    • BloggerSpice
      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 yo…
    Reply
    Reply
  6. Tally Knowledge
    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
    • BloggerSpice
      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 :)
    • BloggerSpice
      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 :)
    Reply
    Reply
  7. Tally Knowledge
    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.
    • BloggerSpice
      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
    Reply
    Reply
  8. Hallo Rabbi

    How are you?

    Thanks for your valuable replies and support.

    Today i have a big problem, google banned my site for malware. But i see there is no malware on my site. I remove all the ad codes on my site but still google show there is a malware on my site. Will you please help me in this regard.

    Sumit Kumar
    • BloggerSpice
      Hi Sumit Kumar,
      Get the hack report from Google Webmaster tools. You can scan your site by Online tools. Please visit below URL for site address.

      http://www.bloggerspice.com/2013/07/how-to-scan-blogspot-wordpress-drupal.html

      remove malware affected article. Malware can be affect a single phrase or sentence. So check it in Googel Webmaster tools and remove the phrase or sentenc or the whole article from your site.

      You can follow similar article from below URL. My site was hacked and I have recovered by following that steps.

      http://www.bloggerspice.com/2016/04/this-site-may-be-hacked-message.html

      Hope get back your site safely soon. :ey
    Reply
    Reply
  9. Tally Knowledge
    Hallo Rabbi

    Thanks again for your instant reply.

    I have received following message from google.

    Social engineering content detected on http://www.tallyknowledge[.]com/

    To: Webmaster of http://www.tallyknowledge[.]com/,

    Google’s Safe Browsing systems have detected that some pages on your site might be hacked or might include third-party resources such as ads that are designed to trick users into installing malicious software or giving up sensitive information. To protect your site’s visitors, your site has been demoted in Google’s search results and browsers such as Google Chrome now display a warning when users visit your site.

    I already delete all the ads code from my site. But problem is still coming.
    • BloggerSpice
      Generally it takes 1 week to solve the issue. I just diagnosed your site still showing negative result.

      http://www.google.com/safebrowsing/diagnostic?site=www.tallyknowledge.com

      Please Visit Google Search Console and Check "Security Issues" and detect which site has affected by Malware and after that delete the infected article and after that request a review on your site. So Google stuff will review your site and re-index it. But generally it will take more or less than 1 week.
      :gt

    Reply
    Reply
  10. Tally Knowledge
    Hallo Rabbi

    Thank You very much for your help. Now i get my website back live. Without your help i cant get back my site. Thank you very much. You are like a super hero.

    I also want a little favour from yourside.

    I like your site very much specially design and presentatio of site. It is blogger site. Will you please share this template with me with all credits belongs to you and your site.
    • BloggerSpice
      Hi Sumit Kumar,
      Thanks for your comment. I'm using Blogger. But probably I will switch to WordPress after certain period of time.

      Sorry to say that my Blogger template is not for Sale or free distribution. You can hire me for designing your Blogger template. I'm have worked with many European client since 2015. Please visit my service page for details.

      http://www.bloggerspice.com/p/hire-us-for-premium-services.html

      Thank you. :up
    Reply
    Reply
  11. Hallo Rabbi

    Thanks a ton for your precious advice and instant help.

    I need your help again. I have blogger website tallyssolution.blogspot.com
    Today i used the structed data tool for my above blogger site. But there is lots of error. Can you please help me to remove these errors.
    Thanks in Advance
    • BloggerSpice
      Hi Sumit Kumar,
      Your blog is not allowed to visit unregistered visitors. So i can't see. Anyway I have released dozens of tutorial to solve the structured data error. You will find all tutorial in SEO section . http://www.bloggerspice.com/search/label/SEO?max-results=6

      If you can't solve the issue then you should try Blogger's new default theme. To know more about default theme feature please visit below review URL.

      http://www.bloggerspice.com/2017/03/blogger-new-theme.html

      Thank you. :)
    Reply
    Reply
  12. Tally Knowledge
    Hallo Rabbi

    Sorry for inconvenience. Now you are a reader of my blog. Please review once. Please
    Reply
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up