x2 Spacing between characters and double up between words - in Announcement bar (Theme: DAWN)

Hello :slightly_smiling_face:
So i tried a lot of thing i found here in the forum but nothing worked.
basically i want to add some code like this (found here in the forum):

h2.h1.section-header__title { letter-spacing: 5px; word-spacing: 10px; }

But i have no idea how to implement it in the code below:
Here is the full code from the Announcement bar in the DAWN template:

{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when ‘announcement’ -%}

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

{{ 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”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “accent-1”,
“label”: “t:sections.all.colors.label”
},
{
“type”: “url”,
“id”: “link”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.link.label”
}
]
}
],
“default”: {
“blocks”: [
{
“type”: “announcement”
}
]
}
}
{% endschema %}

Hello @Wildflower2920

Please add that line of code in base.css at the bottom of file.

Hi @Wildflower2920 ,

If you want to make changes to the ‘Announcement Bar’, you can follow these instructions:

Go to Assets > base.css and paste this at the bottom of the file:

.announcement-bar__message {
    letter-spacing: .4rem !important;
    word-spacing: 1rem !important;
}

Hope it helps!

1 Like

Great, that worked :slightly_smiling_face:
(i changed the word spacing to 0rem and i looks good

thanks a lot!

:slightly_smiling_face:

1 Like