Change Background Color of Announcement Bar (only announcement bar) in Debut Theme

Technical Q&A
1

Hi. I would like to change the color of the announcement bar (only the announcement bar) on our site. Changing the color in the announcement bar section using the “Customize” theme button does nothing so I must have code that is overwriting that somewhere.

MattG01_0-1611255420819.png
MattG01_0-1611255420819.png1868×862 264 KB

I have tried various ways to change the color in this code (theme.scss.liquid) but have had no luck.

.announcement-bar {
text-align: center;
position: relative;
z-index: $z-index-announcement-bar;
}

.announcement-bar–link {
display: block;
}

.announcement-bar__message {
display: block;
font-size: em(16);
font-weight: $font-weight-header;
padding: 10px $gutter-site-mobile;

@include media-query($medium-up) {
padding: 10px $gutter-site;
}

Any help would be very much appreciated.

2

Hi @MattG01 ,

Can you please share your store’s URL so we can adjust this? Cheers!

3

https://brilliantgifts.com/

4

The announcement bar background style is managed in a section starting on line 23 of header.liquid. The background-color attribute is the style in .annoucement-bar that you are looking for.

Here’s the snippet of the code to help you get oriented:

...

  {% if section.settings.message %}
    {% if section.settings.home_page_only == false or request.page_type == 'index' %}
      
...
5

Do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid OR theme.css and paste this at the bottom of the file:
.announcement-bar {

background-color: #FF0000  !important;
}

You can change the #ff0000 to any hex color you want.

Also, you may want to check this plugin for Debut theme out.
It offers many more customizations, including announcement bar background & text color, sticky announcement bar, show only on home page or not, etc. All customizable directly from the customize page.

Please let me know whether it works.

Kind regards,
Diego

6

Diego…Does this code look correct? I added the code and saved it but no luck. The bar is still gray.

MattG01_0-1611332276582.png
MattG01_0-1611332276582.png1327×790 48.9 KB

7

themecaster… I am a rookie to coding (even that may be generous) but I made the change below and still no luck. Do you see anything else that needs top be changed

MattG01_0-1611332681527.png
MattG01_0-1611332681527.png980×720 48.8 KB

8

@MattG01

Please share your website url.

If your website is not live yet, here is a tutorial of how to privately share a “non-live” website.

9

https://www.brilliantgifts.com

10

Hi Matt,

You’re in the right place to change the alert bar color for an out of the box Debut theme. In this case, another css style is taking priority.

A good trick to use to determine what css style is driving the output is to use developer tools in chrome (press Ctrl + Shift + I on the HTML element). Here’s the relevant output in chrome:

themecaster_0-1611354439245.png
themecaster_0-1611354439245.png1059×699 74.3 KB

Looks like there is a file called custom-style.css that is overriding the background color on line 156 and includes an !important directive to drive up the priority :

.announcement-bar {
	background-color: #989898!important;
    float: left;
    width: 100%;
}

Delete or change this line and you are in business.

4 Likes
11

Thank you themecaster. That was it. I appreciate the help!

12

Is there a way to make the announcement background color changing like this site? Lovisa.com. And how can you tell what theme they are using?