How can I apply custom CSS to a PageFly HTML snippet?

[cotty]

Hi all,

Here's my problem - we use PageFly and wanted to add +20% VAT on to prices shown. Their customer service said this wasn't possible, however, I remembered that you can insert a HTML/Liquid snippet, so, I could add the below snippet, which I found in another forum post:

{{ product.price | times:1.2 | money }}

This works, of course. However, I'm now stuck on how I apply CSS to this snippet. Any ideas? I read this article about creating my own CSS file and adding to assets section, which I've done, and it looks like this (saved as vat.css):

<style>
font-size: 24px;
font-family: Roboto;
color: rgb(34, 34, 34);
text-align: center;
</style>

Am I going down the correct path or am I completely way off? I'm no techie, so now I'm at a loss of how I apply this style to the afformentioned code product.price.

Any help pointing me in the right direction would be really appreciated!

[satsinghrana]

Please share the page and the place where you want to apply this there must be a way around!. we can find that.

[g33kgirl · Accepted solution]

Your CSS is incorrect. You need to add reference to the class or ID of the selector you want to apply the style on.

To do that, you can add a wrapper element to product.price:

<div class="vat-price">
{{ product.price | times:1.2 | money }}
</div>

Now style it in your CSS file:

.vat-price {
font-size: 24px;
font-family: Roboto;
color: rgb(34, 34, 34);
text-align: center;
}

Have you added the link to your newly created CSS file in theme.liquid file?

[cotty]

Thanks for the help @g33kgirl, so happy I could cry! Coffee tips sent. :))

[g33kgirl]

@cotty Thank you.