Deprecated: Function create_function() is deprecated in /home/macalcco/soplaynice.com/wp-includes/pomo/translations.php on line 208

Deprecated: Function create_function() is deprecated in /home/macalcco/soplaynice.com/wp-includes/pomo/translations.php on line 208

Deprecated: Function create_function() is deprecated in /home/macalcco/soplaynice.com/wp-includes/pomo/translations.php on line 208
Changing the Address Bar Colour in Google Chrome

SoPlayNice

Changing the Header and Address Bar Colour in Google Chrome on Android

April 15th, 2015 by in Tutorials

In the latest major release for Android called Lollipop, Google added the ability to change the header and address bar colour in Google Chrome to whatever colour you would like, which makes it easy to add your own brand to the whole screen.

It turns out this change has been around for a while now, but I only noticed last week when looking up who to bet for on the Grand National on William Hill that it was a possibility. It seems that although the feature has been around for a while now, it isn’t a very well known, or much used feature, meaning we might as well get ahead of the game!

If you do know of any sites which have this feature implemented, let me know in the comments, I would love to see some more.

Adding the Feature

Since seeing it, I have been very interested in adding it to SoPlayNice and incorporating it into any projects I do in the future.

Luckily adding the feature is as simple as adding a little snippet of code to your header section. Take a look at the code below, this is the code I have used on SoPlayNice, so if you want to take a closer look, hop onto your phone and go onto this website or take a lot in the source code.

<meta name=”theme-color” content=”#f7a57a”>

The code is in the form of a meta tag, which described by W3Schools is;

Metadata is data (information) about data.

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

The ‘name=”theme-color”‘ tells Chrome what to do with the information. Currently the feature is only supported in Chrome, but I wouldn’t be surprised if it starts appearing on more browsers.

The Result

You should now have something like the screenshots below. It is such a small part of a website, but it adds that extra bit of branding and like it did with the William Hill website, it makes your website stand out that little bit more.

Tags: , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

Have a project idea? Feel free to contact me and find out how we can work together.