How Can I Make Hyperlink Different Colour

Solved

How Can I Make Hyperlink Different Colour

DoggyBox
Excursionist
15 0 4

Hey Guys!

 

DoggyBox_0-1628446560303.png

 

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

 

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

Accepted Solutions (2)
Subhranil
Shopify Partner
41 8 56

This is an accepted solution.

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.

View solution in original post

Subhranil
Shopify Partner
41 8 56

This is an accepted solution.

@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;
}

View solution in original post

Replies 13 (13)

Subhranil
Shopify Partner
41 8 56

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.

DoggyBox
Excursionist
15 0 4

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

Subhranil
Shopify Partner
41 8 56

This is an accepted solution.

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.

DoggyBox
Excursionist
15 0 4

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

DoggyBox_0-1628450540984.png

 

Subhranil
Shopify Partner
41 8 56

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

DoggyBox
Excursionist
15 0 4

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

Thank you.

Subhranil
Shopify Partner
41 8 56

@DoggyBox 
Please try the following CSS:

.h4.grid-view-item__title.product-card__title:hover {
    color: #fff !important;
    border-bottom-color: #fff !important;
}
DoggyBox
Excursionist
15 0 4

Hey,

That doesn't seem to have worked unfortunately..

Subhranil
Shopify Partner
41 8 56

This is an accepted solution.

@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;
}
DoggyBox
Excursionist
15 0 4

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.

Parocare886
Visitor
2 0 0

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?

BonzaDogTreats
Shopify Partner
101 1 17

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

Parocare886
Visitor
2 0 0

I have the same wish, anyone?