How do i edit my annoucement bar fonts sizes ?

Aaron_Toh
New Member
4 0 0

How do I amend my announcement bar's font sizes and which .liquid i should head to. I have no knowledge about css but a simple step explanation could help me alot. Thank you.

Replies 12 (12)
Lixon_Louis
Shopify Partner
1193 35 268

Use this code at the very bottom of theme.scss.liquid (inside Assets)

.announcement-bar__message{ font-size: 18px}

 

Aaron_Toh
New Member
4 0 0

Thanks it helps! Another question, how do i probably change the fonts and also bold the fonts. Would you be able to advise me on this as well ? Thank you.

Churidan
Shopify Partner
1 0 4

Hey Aaron, been a long time since you posted this question but since no one answered I thought I would now.

 

To make it bold:

.announcement-bar__message{ font-size: 12px; font-weight: bold}

To change the font (say Arial in this example):

.announcement-bar__message{ font-size: 12px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;}

 

RevolutionNow
New Member
1 0 0

This doesn't work on my Supply theme.

 

revolutionary-t-shirts.com

 

Would be grateful for any advice, also on removing padding on header and footer. Thanks and regards

 

Steve

John1118
New Member
5 0 0

Same here, it does'nt work. Is there a way this could work? Thanks.

Jordan1990
Tourist
13 0 3

Works when changing the font size, but how do I change the width of the actual bar?

Dannielfranics
Tourist
3 0 1

it works on the mobile view but there are some glitches or crosses along the webpage when in desktop view. can you help?

paramashop
New Member
1 0 0

I also have the same question. How to change bar width?

MatthewS
New Member
1 0 0
ecordier
New Member
1 0 0

Any idea why my font size is not changing after adding this code? I'm using Impulse

Screen Shot 2020-07-30 at 11.24.21 AM.png

 

Ferguson
Tourist
6 0 3

Hi can you please tell me where exactly to add this.

Thanks !!

{% endcomment %}

{% if section.settings.show_announcement %}
<div class="header-bar__module header-bar__message>
{% if section.settings.announcement_link != blank %}
<a href="{{ section.settings.announcement_link }}">
{% endif %}
{{ section.settings.header_text | escape }}

{% if section.settings.announcement_link != blank %}
</a>

{% endif %}

AussieQBBQ
Tourist
8 0 4

Doesnt seem to work on the Venue theme either.