weDesign – RAM5N, Inc.

How to Change the Color of Address Bar in Mobile Browser to Match Your WordPress Site

Friday, 19 June 2015 by RAM5N, Inc.

Have you noticed that many popular websites like BBC and Facebook use their own brand colors for the address bar in mobile browser. Recently, one of our users asked us if we could write about how to change the color of address bar in mobile browser to match their WordPress theme? In this article, we will show you how to change the color of address bar in mobile browser to match your WordPress site.

Why Match Address Bar Color in Mobile Browser?

Most popular WordPress themes are mobile responsive. This makes your site looks great on mobile devices. However, it still looks and feels like a website.

Matching the color of address bar to your WordPress site, gives it a native app-like feel. This improves user experience, which ultimately boosts sales and conversions.

However, please note that currently it only works for Google Chrome web browser on Android devices using Lollipop or newer versions.

Match Address Bar Color on Mobile Browser to Your WordPress Theme

Simply add this code in your theme or child theme‘s header.php file just before the closing </head> tag.

<meta name="theme-color" content="#ff6600" />

This line is a HTML meta tag used by Google Chrome on Android to change color of address bar in mobile browser. The content field has the hex code for the color you want to use as theme color.

Not sure how to get the hex color code?

You can get the HEX value of a color using any image editing software like Adobe Photoshop, Gimp, Paint, etc.

You can also pick a color using online HTML color picker tools.

If you want to pick a color from a web page, then you can use a browser extension like ColorZilla.

That’s all, we hope this article helped you learn how to change the color of address bar in mobile browser to match your WordPress site. You may also want to see our CSS Hero review, it is the easiest way to customize your WordPress theme.

For permission content from this site must be hyperlinked when used!

Published in Technology, weDesign, weSoftware, weTechnology

2 Comments

WordPress. How to change “themeXXXXX” folder name [US]

Sunday, 05 April 2015 by RAM5N, Inc.

Log into your WordPress admin panel.
Navigate to Appearance – > Themes and deactivate your current theme. You can achieve this by activating any other/default theme:
Access your server using any ftp software or FileManager provided by your host.
Navigate to ‘wp-content/themes’ directory on the server:
Rename the theme folder:
Get back to your WordPress dashboard and navigate to Appearance -> Editor menu.
Select your theme to edit and click ‘Select’ button:
Open ‘style.css’ file:
Change ‘Theme Name’ value to your new theme name. Save the changes:
Get back to Appearance – > Themes menu and activate your theme. Activate your parent theme first (CherryFramework) and then activate the renamed theme.