Re: COLOR SAFARI BORDER

AA226 · ‎11-28-2024

Dear community,

I'm looking for CSS code to change the color of the backround on safari, i've been loooking for the setting everywhere in my theme but there's nothing.

So if anyone has a code, i'll be forever grateful,

Thanks in advance

edibpe-sw.myshopify.com

psw : kingaaliya

TheUntechnickle · ‎11-28-2024

Hey @AA226,

I sincerely apologize for my earlier response that addressed the announcement banner instead of the Safari background color.

To change the Safari background color (specifically for the browser’s top bar when viewing your website), you’ll need to use the meta tag theme-color. Here’s how you can implement it:

Steps to Fix

Go to your theme's theme.liquid file.
Add the following <meta> tag within the <head> section:

<meta name="theme-color" content="#000000">

Replace #000000 with the hex code for your desired color. This will control the Safari background color when your site is opened.

This tag sets the browser’s theme color for the top bar, especially on mobile devices. It's a quick and effective way to ensure consistency with your brand's colors.

If you have any trouble implementing this, feel free to reach out, I’m here to assist further.

Best regards,
Shubham

Helping for free: hello@untechnickle.com

Don't forget to say thanks, it'll make my day - just send me an email! 

Get Revize for Free | Let your shoppers edit orders post-purchase | Get Zero Support Tickets | #1 Order Editing + Upsell App

View solution in original post

TheUntechnickle · ‎11-28-2024

Hey @AA226,

Here's the CSS you can use:

.announcement-slide {
background: #3d2920 !important;
color: #f4f0ee !important;
}

You can change the colors according to your choice. 'background:' will change the background color, and 'color:' will change the text color.

Let me know if you've any more questions, would love to help 🙂

Cheers!
Shubham | Untechnickle

Helping for free: hello@untechnickle.com

Don't forget to say thanks, it'll make my day - just send me an email! 

Get Revize for Free | Let your shoppers edit orders post-purchase | Get Zero Support Tickets | #1 Order Editing + Upsell App

TheUntechnickle · ‎11-28-2024

Hey @AA226,

I sincerely apologize for my earlier response that addressed the announcement banner instead of the Safari background color.

To change the Safari background color (specifically for the browser’s top bar when viewing your website), you’ll need to use the meta tag theme-color. Here’s how you can implement it:

Steps to Fix

Go to your theme's theme.liquid file.
Add the following <meta> tag within the <head> section:

<meta name="theme-color" content="#000000">

Replace #000000 with the hex code for your desired color. This will control the Safari background color when your site is opened.

This tag sets the browser’s theme color for the top bar, especially on mobile devices. It's a quick and effective way to ensure consistency with your brand's colors.

If you have any trouble implementing this, feel free to reach out, I’m here to assist further.

Best regards,
Shubham

Helping for free: hello@untechnickle.com

Don't forget to say thanks, it'll make my day - just send me an email! 

Get Revize for Free | Let your shoppers edit orders post-purchase | Get Zero Support Tickets | #1 Order Editing + Upsell App

AA226 · ‎11-28-2024

Perfect thank you so much

TheUntechnickle · ‎11-28-2024

You're most welcome! Also, do checkout Revize below, your customers will love it.

Helping for free: hello@untechnickle.com

Don't forget to say thanks, it'll make my day - just send me an email! 

Get Revize for Free | Let your shoppers edit orders post-purchase | Get Zero Support Tickets | #1 Order Editing + Upsell App