{"id":20471,"date":"2018-05-21T13:01:15","date_gmt":"2018-05-21T13:01:15","guid":{"rendered":"https:\/\/www.awardspace.com\/?page_id=20471"},"modified":"2024-02-27T15:18:20","modified_gmt":"2024-02-27T15:18:20","slug":"change-color-address-bar-mobile-browser","status":"publish","type":"post","link":"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/","title":{"rendered":"How to Change the Color of Address Bar in Mobile Browser"},"content":{"rendered":"

It\u2019s already trivial but it is still true. People are using their phones for virtually everything. From entertainment to information gathering. Thus, probably at least half of your users, are entering your website via phone. And while that certainly creates some sort of discomfort, it is a huge advantage considering the additional traffic that you will get.<\/p>\n

There are a lot of ways to make your brand<\/a> stand out. And probably, you need to take advantage of most of them.<\/p>\n

To get there, you will have to take one step at a time.<\/p>\n

One of the most important elements of brand building is color. And the color is not easy to master. You need to consider not only the color itself but also its hue and saturation. And once you get that right, you have to put the effort in order not to overdo it.<\/p>\n

You can\u2019t paint everything related to your brand with its colors.<\/p>\n

But the address bar of your WordPress website on a mobile browser is one thing that you can easily and confidently paint according to your brand\u2019s guidelines.<\/p>\n

Take a look at huge websites like Facebook, BBC, and The Guardian, all of these and a lot more websites, colored their mobile browser address bars.<\/p>\n

 <\/p>\n

How to Color The Address Bar of Your WordPress Website on a Mobile Browser<\/h2>\n

With the new version of WordPress which was released in November 2017, the possibility to directly change the code of the themes was highly limited. Not that it is not possible, you just have to do it via the Admin Panel, and not through the WordPress Dashboard.<\/p>\n

If you try to edit the code, most probably you\u2019ll face an error, which will recommend you to use an FTP by which to download the file you want to edit, edit it locally on your computer, and then re-uploading it. This is a lot of unnecessary work.<\/p>\n

With the admin panel, you\u2019ll be presented with our web hosting services<\/a>, you won\u2019t have to do all of this. You can just find the file you want to edit, double-click it and add or remove whatever you want.<\/p>\n

Now that we got this out of the way, let\u2019s focus on coloring your mobile browser’s address bar.<\/p>\n

It is a fairly easy task. All you need to do is to copy the following code:<\/p>\n

<meta name=\u201dtheme-color\u201d content=\u201d#327eb9\u201d \/> <\/em><\/p>\n

And paste it into your header.php <\/strong>file.<\/p>\n

You need to place the code just above the closing <\/head><\/strong> tag.<\/p>\n

NB!<\/strong> #327eb9 is the HEX value of the AwardSpace\u2019s blue color.<\/p>\n

You\u2019ll probably want to use your brand\u2019s color or the color of your menu, as the menu will be right below the address bar.<\/p>\n

In any case, if you don\u2019t know the HEX value of your brand color or any element that you want to match with the color of the mobile browser\u2019s address bar, you can use color pick extensions.<\/p>\n

Like ColorZilla<\/a>, for example.\u00a0<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

It\u2019s already trivial but it is still true. People are using their phones for virtually everything. From entertainment to information gathering. Thus, probably at least half of your users, are entering your website via phone. And while that certainly creates some sort of discomfort, it is a huge advantage considering the additional traffic that you […]<\/p>\n","protected":false},"author":3,"featured_media":30484,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"

\u00a0<\/p>

Image already added
\u00a0<\/div>
\u00a0<\/div><\/div>
\u00a0<\/div>","_et_gb_content_width":"","footnotes":""},"categories":[85],"tags":[],"class_list":["post-20471","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-customization"],"yoast_head":"\nChange the Color of Address Bar in Mobile Browser | WordPress Tutorials<\/title>\n<meta name=\"description\" content=\"The address bar of your WordPress website on a mobile browser is one thing that you can easily and confidently paint according to your brand\u2019s guidelines. Take a look at huge websites like Facebook, BBC, and The Guardian, all of these and a lot more websites, colored their mobile browser address bars.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Change the Color of Address Bar in Mobile Browser | WordPress Tutorials\" \/>\n<meta property=\"og:description\" content=\"The address bar of your WordPress website on a mobile browser is one thing that you can easily and confidently paint according to your brand\u2019s guidelines. Take a look at huge websites like Facebook, BBC, and The Guardian, all of these and a lot more websites, colored their mobile browser address bars.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/\" \/>\n<meta property=\"og:site_name\" content=\"AwardSpace.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AwardSpace\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-21T13:01:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-27T15:18:20+00:00\" \/>\n<meta name=\"author\" content=\"Lazar Shishmanov, PhD\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@awspace\" \/>\n<meta name=\"twitter:site\" content=\"@awspace\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lazar Shishmanov, PhD\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/\"},\"author\":{\"name\":\"Lazar Shishmanov, PhD\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/person\/13f0961f1cff18623121a6716f08c58b\"},\"headline\":\"How to Change the Color of Address Bar in Mobile Browser\",\"datePublished\":\"2018-05-21T13:01:15+00:00\",\"dateModified\":\"2024-02-27T15:18:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/\"},\"wordCount\":520,\"publisher\":{\"@id\":\"https:\/\/www.awardspace.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"Customization\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/\",\"url\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/\",\"name\":\"Change the Color of Address Bar in Mobile Browser | WordPress Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/www.awardspace.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2018-05-21T13:01:15+00:00\",\"dateModified\":\"2024-02-27T15:18:20+00:00\",\"description\":\"The address bar of your WordPress website on a mobile browser is one thing that you can easily and confidently paint according to your brand\u2019s guidelines. Take a look at huge websites like Facebook, BBC, and The Guardian, all of these and a lot more websites, colored their mobile browser address bars.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.awardspace.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Tutorials\",\"item\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Customization\",\"item\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/customization\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How to Change the Color of Address Bar in Mobile Browser\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.awardspace.com\/#website\",\"url\":\"https:\/\/www.awardspace.com\/\",\"name\":\"AwardSpace.com\",\"description\":\"Free Web Hosting with PHP, MySQL, Email Sending, No Ads\",\"publisher\":{\"@id\":\"https:\/\/www.awardspace.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.awardspace.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.awardspace.com\/#organization\",\"name\":\"AwardSpace.com\",\"url\":\"https:\/\/www.awardspace.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png\",\"contentUrl\":\"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png\",\"width\":1759,\"height\":176,\"caption\":\"AwardSpace.com\"},\"image\":{\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/AwardSpace\/\",\"https:\/\/x.com\/awspace\",\"https:\/\/www.instagram.com\/awardspace\/\",\"https:\/\/www.quora.com\/profile\/Award-Space\",\"https:\/\/www.linkedin.com\/company\/19214384\/\",\"https:\/\/www.reddit.com\/user\/AwardSpace\",\"https:\/\/www.pinterest.com\/awardspace\/\",\"https:\/\/www.youtube.com\/user\/AwardspaceWebHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/person\/13f0961f1cff18623121a6716f08c58b\",\"name\":\"Lazar Shishmanov, PhD\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/341ac134090ebf7e8095d20d79485f8652e19c1d00cfef899e40c69ec4ac10cb?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/341ac134090ebf7e8095d20d79485f8652e19c1d00cfef899e40c69ec4ac10cb?s=96&d=mm&r=g\",\"caption\":\"Lazar Shishmanov, PhD\"},\"description\":\"Lazar is a marketing specialist with more than ten years of experience in the field, eight of which as part of the marketing department at AwardSpace. Academically, Lazar holds a Bachelor's degree in Public Relations, a Master's degree in Semiotics, Language and Advertising, and is a PhD candidate in Integrated Marketing Communications. You can learn more about Lazar on his personal website.\",\"url\":\"https:\/\/www.awardspace.com\/author\/lazar\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Change the Color of Address Bar in Mobile Browser | WordPress Tutorials","description":"The address bar of your WordPress website on a mobile browser is one thing that you can easily and confidently paint according to your brand\u2019s guidelines. Take a look at huge websites like Facebook, BBC, and The Guardian, all of these and a lot more websites, colored their mobile browser address bars.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/","og_locale":"en_US","og_type":"article","og_title":"Change the Color of Address Bar in Mobile Browser | WordPress Tutorials","og_description":"The address bar of your WordPress website on a mobile browser is one thing that you can easily and confidently paint according to your brand\u2019s guidelines. Take a look at huge websites like Facebook, BBC, and The Guardian, all of these and a lot more websites, colored their mobile browser address bars.","og_url":"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/","og_site_name":"AwardSpace.com","article_publisher":"https:\/\/www.facebook.com\/AwardSpace\/","article_published_time":"2018-05-21T13:01:15+00:00","article_modified_time":"2024-02-27T15:18:20+00:00","author":"Lazar Shishmanov, PhD","twitter_card":"summary_large_image","twitter_creator":"@awspace","twitter_site":"@awspace","twitter_misc":{"Written by":"Lazar Shishmanov, PhD","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/#article","isPartOf":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/"},"author":{"name":"Lazar Shishmanov, PhD","@id":"https:\/\/www.awardspace.com\/#\/schema\/person\/13f0961f1cff18623121a6716f08c58b"},"headline":"How to Change the Color of Address Bar in Mobile Browser","datePublished":"2018-05-21T13:01:15+00:00","dateModified":"2024-02-27T15:18:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/"},"wordCount":520,"publisher":{"@id":"https:\/\/www.awardspace.com\/#organization"},"image":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/#primaryimage"},"thumbnailUrl":"","articleSection":["Customization"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/","url":"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/","name":"Change the Color of Address Bar in Mobile Browser | WordPress Tutorials","isPartOf":{"@id":"https:\/\/www.awardspace.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/#primaryimage"},"image":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/#primaryimage"},"thumbnailUrl":"","datePublished":"2018-05-21T13:01:15+00:00","dateModified":"2024-02-27T15:18:20+00:00","description":"The address bar of your WordPress website on a mobile browser is one thing that you can easily and confidently paint according to your brand\u2019s guidelines. Take a look at huge websites like Facebook, BBC, and The Guardian, all of these and a lot more websites, colored their mobile browser address bars.","breadcrumb":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/change-color-address-bar-mobile-browser\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.awardspace.com\/"},{"@type":"ListItem","position":2,"name":"WordPress Tutorials","item":"https:\/\/www.awardspace.com\/wordpress-tutorials\/"},{"@type":"ListItem","position":3,"name":"Customization","item":"https:\/\/www.awardspace.com\/wordpress-tutorials\/customization\/"},{"@type":"ListItem","position":4,"name":"How to Change the Color of Address Bar in Mobile Browser"}]},{"@type":"WebSite","@id":"https:\/\/www.awardspace.com\/#website","url":"https:\/\/www.awardspace.com\/","name":"AwardSpace.com","description":"Free Web Hosting with PHP, MySQL, Email Sending, No Ads","publisher":{"@id":"https:\/\/www.awardspace.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.awardspace.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.awardspace.com\/#organization","name":"AwardSpace.com","url":"https:\/\/www.awardspace.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png","contentUrl":"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png","width":1759,"height":176,"caption":"AwardSpace.com"},"image":{"@id":"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/AwardSpace\/","https:\/\/x.com\/awspace","https:\/\/www.instagram.com\/awardspace\/","https:\/\/www.quora.com\/profile\/Award-Space","https:\/\/www.linkedin.com\/company\/19214384\/","https:\/\/www.reddit.com\/user\/AwardSpace","https:\/\/www.pinterest.com\/awardspace\/","https:\/\/www.youtube.com\/user\/AwardspaceWebHosting"]},{"@type":"Person","@id":"https:\/\/www.awardspace.com\/#\/schema\/person\/13f0961f1cff18623121a6716f08c58b","name":"Lazar Shishmanov, PhD","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.awardspace.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/341ac134090ebf7e8095d20d79485f8652e19c1d00cfef899e40c69ec4ac10cb?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/341ac134090ebf7e8095d20d79485f8652e19c1d00cfef899e40c69ec4ac10cb?s=96&d=mm&r=g","caption":"Lazar Shishmanov, PhD"},"description":"Lazar is a marketing specialist with more than ten years of experience in the field, eight of which as part of the marketing department at AwardSpace. Academically, Lazar holds a Bachelor's degree in Public Relations, a Master's degree in Semiotics, Language and Advertising, and is a PhD candidate in Integrated Marketing Communications. You can learn more about Lazar on his personal website.","url":"https:\/\/www.awardspace.com\/author\/lazar\/"}]}},"_links":{"self":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts\/20471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/comments?post=20471"}],"version-history":[{"count":0,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts\/20471\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/media?parent=20471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/categories?post=20471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/tags?post=20471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}