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

Solved
MattG01
New Member
7 0 0

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

 

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.

0 Likes
JHKCreate
Shopify Partner
1984 321 426

Hi @MattG01 ,

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

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
MattG01
New Member
7 0 0

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:

...
<div data-section-id="{{ section.id }}" data-section-type="header-section" data-header-section>
  {% if section.settings.message %}
    {% if section.settings.home_page_only == false or request.page_type == 'index' %}
      <style>
        .announcement-bar {
          background-color: {{ section.settings.color_bg }};
        }

        .announcement-bar__link:hover {
          {% assign brightness = section.settings.color_bg | color_brightness %}

          {% if brightness <= 192 %}
            {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
            background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
          {% else %}
            {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
            background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
          {% endif %}
        }

        .announcement-bar__message {
          color: {{ section.settings.color_text }};
        }
      </style>
...

 

 

 

 

 

  

If my response was helpful please Like and Mark As Solution.
0 Likes

 

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
MattG01
New Member
7 0 0

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

 

0 Likes
MattG01
New Member
7 0 0

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

 

0 Likes

@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.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
MattG01
New Member
7 0 0

This is an accepted solution.

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

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.

If my response was helpful please Like and Mark As Solution.