Change link color with custom liquid

[petitlaurierco]

Hello! 🙂

I wanna change the color of these link:

I used a custom liquid with the dawn theme. here's the liquid code :

<center><a href="#shopify-section-template--15987601965304__16524687050e0e549a">Fragrance 1</a> | <a href="#shopify-section-template--15987601965304__1652577062073195ba">Fragrance 2</a> | <a href="#shopify-section-template--15987601965304__165348523297d9ac61">Fragrance 3</a> | <a href="#shopify-section-template--15987601965304__1653485308448b3547">Fragrance 4</a></center>

How can I change the blue color so it is now #3C3C3C

thank you 🙂

[Max123456]

@petitlaurierco 

<a href="#shopify-section-template--15987601965304__16524687050e0e549a" style="color:#3C3C3C">Fragrance 1</a>

add style="color:#3C3C3C" in <a href

[petitlaurierco]

@Max123456 thanks for getting back to me. it doesn't seem to work unfortunately. Even after I added the color code, it remains blue. Do you have any idea why? thank you

[shockify]

Firstly you're using the 'href' attribute incorrectly. This should be the URL (web page) that you wish to link to. What you have looks to be the 'id' attribute. Correct this (whatever) and it might also help with your issue.

If it doesn't and you can avoid coding then you should: https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css.

But if you can't...

Search your custom CSS file (for styling) to see where the blue colour is being administered. This will be an 'a' tag of some description so will look something like this:

a {
color: #0000ff !important; // the '!important' part is saying don't let it be overridden
}

So it may well be there in there so you could change the colour there. This is assuming that you have a custom CSS file .. and you really should if you want an easier life (especially when it comes to updating your theme).

If you've still got issues then I would suggest using your browser's 'Dev Tools' to identify the style that is administering the blue to your link. Here's how to do that in Chrome: https://developer.chrome.com/docs/devtools/css/ (check online for other browsers). Then use the most suitable of these techniques: https://www.digismoothie.com/blog/custom-css.

If for some reason you are making an exception (you want the colour of this specific link different to your general rule for links) then you would need something like this in your custom CSS file:

.shopify-section a.my_link {
color: #3C3C3C;
}

And your liquid file should probably go something like this (exchanging 'YOUR_LINK_#' for your designated web page):

<div id="shopify-section-template--15987601965304__16524687050e0e549a" class="shopify-section shopify-section-group-header-group">
<a href="<YOUR_LINK_1>" class="my_link">Fragrance 1</a>
<a href="<YOUR_LINK_2>" class="my_link">Fragrance 2</a>
<a href="<YOUR_LINK_3>" class="my_link">Fragrance 3</a>
</div>

I would NOT, under any circumstances directly edit your style in the HTML as previously suggested. You have less control and will very likely cause you a headache in the future.

[shockify]

Firstly you're using the 'href' attribute incorrectly. This should be the URL (web page) that you wish to link to. What you have looks to be the 'id' attribute. Correct this (whatever) and it might also help with your issue.

If it doesn't and you can avoid coding then you should: https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css.

But if you can't...

Search your custom CSS file (for styling) to see where the blue colour is being administered. This will be an 'a' tag of some description so will look something like this:

a {
color: #0000ff !important; // the '!important' part is saying don't let it be overridden
}

So it may well be there in there so you could change the colour there. This is assuming that you have a custom CSS file .. and you really should if you want an easier life (especially when it comes to updating your theme).

If you've still got issues then I would suggest using your browser's 'Dev Tools' to identify the style that is administering the blue to your link. Here's how to do that in Chrome: https://developer.chrome.com/docs/devtools/css/ (check online for other browsers). Then use the most suitable of these techniques: https://www.digismoothie.com/blog/custom-css.

If for some reason you are making an exception (you want the colour of this specific link different to your general rule for links) then you would need something like this in your custom CSS file:

.shopify-section a.my_link {
color: #3C3C3C;
}

And your liquid file should probably go something like this (exchanging 'YOUR_LINK_#' for your designated web page):

<div id="shopify-section-template--15987601965304__16524687050e0e549a" class="shopify-section shopify-section-group-header-group">
<a href="<YOUR_LINK_1>" class="my_link">Fragrance 1</a>
<a href="<YOUR_LINK_2>" class="my_link">Fragrance 2</a>
<a href="<YOUR_LINK_3>" class="my_link">Fragrance 3</a>
</div>

I would NOT, under any circumstances directly edit your style in the HTML as previously suggested. You have less control and will very likely cause you a headache in the future.