How can I adjust the Dawn theme's Announcement Bar size?

[spookiesdream]

Hi everyone,

I want to change my Dawn theme’s Announcement Bar font size smaller - the bar height as well -

I appreciate any help.

Best

[AsenWang]

The existing announcement-bar can be extended to support more functions.

{%- for block in section.blocks -%}
  {%- case block.type -%}
    {%- when 'announcement' -%}
      
        {%- if block.settings.text != blank -%}
          {%- if block.settings.link != blank -%}
            
          {%- endif -%}
              {%- capture announcement_style -%}
                font-size: {{ block.settings.font_size }}px;
                color: {{ block.settings.font_color }};
                background-color: {{ block.settings.background_color }};
                padding: {{block.settings.padding}}rem {{ block.settings.padding | times: 2 }}rem;
              {%- endcapture -%}
              

                {{ block.settings.text | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              

          {%- if block.settings.link != blank -%}
            
          {%- endif -%}
        {%- endif -%}
      

  {%- endcase -%}
{%- endfor -%}

{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "blocks": [
    {
      "type": "announcement",
      "name": "t:sections.announcement-bar.blocks.announcement.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Welcome to our store",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        },
        {
          "type": "color",
          "id": "background_color",
          "label": "Background Color"
        },
        {
          "type": "color",
          "id": "font_color",
          "label": "Font Color"
        },
        {
          "type": "range",
          "id": "padding",
          "label": "Announcement Padding",
          "info": "To change the height of Announcement",
          "min": 0,
          "max": 5,
          "step": 0.5,
          "default": 1,
          "unit": "rem"
        },
        {
          "type": "range",
          "id": "font_size",
          "label": "Announcement Font Size",
          "min": 12,
          "max": 30,
          "step": 1,
          "default": 20,
          "unit": "px"
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "announcement"
      }
    ]
  }
}
{% endschema %}

[spookiesdream]

Thanks, where do I replace it, please?

[AsenWang]

Edit the code, search for “announcement-bar.liquid”, and replace the content inside

[spookiesdream]

Thanks a lot, it works but one slight improvement needed, how can I get rid off this thin white line?

Thanks

[Tanapon]

How can I find this section, I can’t find it or maybe I don’t have it.

Should I add new code on layout or template section??

[Couture_by_KJH]

Hi replaced the code of announcement-bar.liquid, there is one small error that text is not aligned to center it is in far left. image attached.