ANNOUNCEMENT AREA

[dianadari]

Hi

How do I change the color of announcement bar when you click on it?

www.your-somnia.com 

Best,

Diana

[Gabe]

Hey Diana! @dianadari 

You've reached the German community and we can chat in German or English, that's no problem.

And thanks for the URL. You would like to change the colour of the announcement bar when there is an on-click event, is that right? Currently the announcement bar changes colour to dark blue on hover. 

So what you would need to do is add some code into the header.liquid. IF this is something you would prefer to let our theme team do then send it over to us. AS you are using the Debut theme you get 60-min design time for any changes you would like our team to do in the code. However, not all customisations are support as you can see here.

The code you are looking for if you want to do it DIY is the following but please only in a copy of your theme:

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

So the line .announcement-bar__link:hover { would need to get a second line added like the following:

• .announcement-bar__link:click { 

And the relevant colour arguments set inside the { parameters.

Hope that helps!