Change colour of hyperlinks on hover

Solved
Emma_Rampton1
Shopify Partner
38 0 9

Hey guys,

I have managed to remove the underline from the hyperlinks on this website I am currently building

https://daisy-emerson-artist.myshopify.com/

Password: DAISY

Theme: Testament

But now I am trying to get the hyperlinks to change colour to pink and underline on hover so user can tell they are links. Theme support have said 

"You would need to create a custom class that requires knowledge of css"

To be honest with you that means nothing to me!

Can anyone on here assist with this?

TIA

HardikDavra
Shopify Partner
2186 337 951

Hello, @Emma_Rampton1 

Welcome to the shopify Community.

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

a:hover {
color: #efdadf !important;
text-decoration: underline;
}
PageFly - TOP5 in the Shopify app store. Learn More.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
Emma_Rampton1
Shopify Partner
38 0 9

Hi @HardikDavra 

Many thanks for this.

I have given it a try but its not doing anything I am afraid

Screenshot 2021-05-14 at 13.04.21.png

Any other ideas?

Many thanks

0 Likes
dmwwebartisan
Shopify Partner
6416 1494 1948

@Emma_Rampton1 

Please add the following code at the bottom of your assets/stylesheet.css file.

a:hover {
    color: #efdadf;
    border-bottom: 1px solid #efdadf;
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Emma_Rampton1
Shopify Partner
38 0 9

Hi @dmwwebartisan 

Thanks so much for the suggestion but I am afraid no joy!

Screenshot 2021-05-14 at 13.53.40.png

This is the page of hyperlinks

https://daisy-emerson-artist.myshopify.com/pages/featured

 

Anyone else got any bright ideas?

TIA

dmwwebartisan
Shopify Partner
6416 1494 1948

@Emma_Rampton1 

Please check the following screenshot. Do this all will work.

remove-extra-bracket.jpg

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Emma_Rampton1
Shopify Partner
38 0 9

Amazing thank you!!

Those brackets always catch me out.

This has had the desired effect on the hyperlinks in the body of pages, but

there is a bit of an issue........

The header logo is also being underlined in pink on hover and the drop down menu links. Any ideas on how I would get this to just take effect on hyperlinks in the body of the pages? 

TIA

dmwwebartisan
Shopify Partner
6416 1494 1948

This is an accepted solution.

@Emma_Rampton1 

Please add the following code for this.

#logo a:hover, ul.dropdown a.dropdown__menulink:hover { border-bottom: none !important; }

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Emma_Rampton1
Shopify Partner
38 0 9

Hi @dmwwebartisan 

Thank you so much for this.

This has fixed the problem now.

So grateful for your help

Emma_Rampton1
Shopify Partner
38 0 9

Hey @dmwwebartisan 

Thanks so much for your help with this before, I was wondering if you might be able to help me again with this one?

So currently when you hover over a hyperlink it underlines first and then turns the text pink, this makes it appear that it is changing colour rather slowly and therefore may not be too obvious that it is, in fact, a hyperlink.

How would I change the code so that the hyper link turned pink first and then underlined as I think this would make it more odviouse?

Thanks so much in advance for your help with this one.

 

Emma

0 Likes