How Can I Make Hyperlink Different Colour

Store Design
1

Hey Guys!

DoggyBox_0-1628446560303.png
DoggyBox_0-1628446560303.png970×345 209 KB

If you can see above, when we hover over “Instagram” it shows up as gold. How do we make both the Twitter & Instagram links Gold at all times - even when you are not hovered over them?

In the theme colours section we already have links set that colour, but it doesn’t work for the text overlay above.

DoggyBox_1-1628446671121.png
DoggyBox_1-1628446671121.png318×506 8.59 KB

Can anyone please tell me how we can achieve this? Thank you!

1 Like
2

Hello @DoggyBox
If you don’t have the hyperlink colour setting option in your theme settings, then you can add the following style on your theme CSS and replace the colour code with your required colour code.

a {
    color: #a0da0d !important;
}

Or share your website link to check.

1 Like
3

Thanks man! That did the trick. Can I push my luck and ask how I make the hover colour now white? :slightly_smiling_face:

4

Hello @DoggyBox
For hover just use the following CSS

a:hover {
    color: #fff !important;
}

If helpful then please Like and Accept & mark it as a Solution.

5

Thanks! Finally, could we do the same for the hover for the product links below?

DoggyBox_0-1628450540984.png
DoggyBox_0-1628450540984.png1246×453 19.5 KB

6

Please share your website link. So, I can check for the solution.

7

Here we go! https://doggyboxdelivery.co.uk/

Thank you.

8

@DoggyBox
Please try the following CSS:

.h4.grid-view-item__title.product-card__title:hover {
    color: #fff !important;
    border-bottom-color: #fff !important;
}
9

Hey,

That doesn’t seem to have worked unfortunately..

10

@DoggyBox
Ok. then just replace the previous CSS with the following CSS:

.grid__item.grid__item--collection.small--one-half.medium-up--one-quarter:hover .h4.grid-view-item__title.product-card__title {
    color: #fff !important;
}
11

Thank you so much @Subhranil for your patience! That’s worked a treat.

If you PM me your PayPal I will send a little donation over.

12

Hi

I added this piece of code and it did make my hyperlinks the colour I wanted - but I noticed that it also made some text in buttons that colour - which didn’t really work for me as my buttons are the colour that I wanted the hyperlinks. As an example, in the screen grab below, Australia Made Australia Grown was #83BD42 (the colour I put in the code) but the text in the shop now button was also that colour, so was invisible. Just to clarify, my theme colour for button text is #ffffff so I’m not sure why it changed. My Add To Cart buttons on product pages weren’t affected. Any ideas please? I’d love to get my hyperlinks a different colour.

Capturehyperlink.PNG
Capturehyperlink.PNG1291×280 19.7 KB

13

Hello, what if you only want to change the colour of the links in the texts, but not in the product titles? Does anyone how to do that?

14

I have the same wish, anyone?