Use This Simple Tweak To Change Chrome Address Bar Color For Your Site


(Pradeep Kumar) #1

This is a small branding tip/tweak I would like to share with you today. I’m a big fan of logos, especially the ideology behind it, and the color combination to represent the brand. Each & every brand under Slashsquare will have a color combination or a singular color to represent the brand. If you compare the two screenshots below, you can see the first one is the default Google Chrome window with the white address bar, but in the second one, with our tweak, we made it into somewhat dark grey, which is the color representing DeviceBAR.

If you want to do like this for your website, then copy the code below (don’t forget to change the color matching your logo or brand), and paste it just above the </head> tag (mostly in header.php file), save the theme/template! That’s all

<meta name=“theme-color” content="#3F3D3D" />

Do try this with your website and share the results with us! :slight_smile:

"Empty Cache and Hard Reload" a Website using Chrome's Developer Tools
(Shivansh Verma) #2

And <meta content='#00ACF5' name='twitter:widgets:link-color'/> for theming twitter feed widget. :slight_smile:

(Pradeep Kumar) #3

This is an interesting tip mate, can you share your output please? A screenshot? :slight_smile:

(Santhosh veer) #4

ya bro Kindly share the Screenshot bro :slight_smile:

(Shivansh Verma) #5

@pradeepkumar & @mskian Yup bro. Sharing. Slowly slowly. #JioUser #1GBFinished :sweat_smile:

(Shivansh Verma) #6


P.S. It might not look good here, in this forum, but it can look good if you use this on your blog/website with your theme color. :slight_smile:

(MC Naveen) #7

Check in
I’m Already using this :slight_smile:

(Santhosh veer) #8

@Shivansh @the_mcnaveen Let me Try

(Hitesh Rawat) #9

Already using it didn’t knew previously how it works then installed Address Bar Changer Plugin & Noticed the code and added to header.php. :slight_smile:

(Ashwani Kumar Singh) #10

Hi Pradeep,

I am using Genesis Child theme. Will this code work if I add it in the Header Scripts option in Genesis theme settings. Also Do I need to add the code under the tag or above the tag?

Thanks in advance :slight_smile:

(Pradeep Kumar) #11

Hi @ashwani597, I think “Header Scripts” option should be fine bro, but still, if you can find header.php file in your theme, it’ll be easy to identify </head> and paste the code above this tag bro. :slight_smile:

(Ashwani Kumar Singh) #12

Yeah bro. I know where the Header.php is, but just wanted to confirm if it was under the tag or above it since you had previously written under the tag. Got confused :joy:
Thanks Bro :slight_smile:

(Pradeep Kumar) #13

Haha, yea bro, edited the post now. :smiley:

(Ashwani Kumar Singh) #14

This is kinda off-topic to this Post. If possible let me know what plugin are you using for those social sharing icons on mobile devices?

(Pradeep Kumar) #15

DeviceBAR blog’s theme is custom-made bro, those social share icons are coded by 7Span team for us. :slight_smile:

(Ashwani Kumar Singh) #16

Oh. OK. Got it. Thanks Bro :slight_smile: (Y)

(Saurabh Guttedar) #17

Not working for my blog. Purged the cache too.

(Pradeep Kumar) #18

Did you try this in Google Chrome (mobile) bro? Or?

(Saurabh Guttedar) #19

Yes, I always use Chrome as my primary browser.

(Pradeep Kumar) #20

I’m getting this ‘Yellow’ color bro, what about you? :slight_smile: