Hover Link Color

Tourist
7 0 1

Hey All!

I'm super new to HTML, so bear with me, but I'm trying to change my Brooklyn theme so that links can change color when the cursor hovers over them. I was playing with HTML code in my Contact Page, which ended up affecting the entire page, including the Social Links in the Footer?! Although it was inadvertent, I really like it and would like to put it in place sitewide, but cleanly without messing up the menu like it did on this particular page! Here is the link to the page where the good (hover color change on social icons) and bad (drawer menu colors incorrect) is happening!

http://www.dryvewheels.com/pages/attempted-social-icons

PASSWORD: kugheu

Thank you in advance for your help and assistance! :)

0 Likes
Highlighted
Shopify Expert
46 0 0

Hi,

Please use below code..

#PageContainer a.text-link {
    border-bottom: 1px solid #000;
    color: #000;
}
#PageContainer a.text-link:hover {
    border-bottom: 1px solid #d67a24;
    color: #d67a24;
}

 

Thanks,

Luwin

Professional Shopify Custom Themes and Modifications. email info@bestchoiceindia.com https://experts.shopify.com/bestchoiceindia
0 Likes
Highlighted
Tourist
7 0 1

Thank you for the quick response! Which file would I want to put this code into and where?!

Thank you!!

0 Likes
Highlighted
Shopify Expert
46 0 0

Hi,

Under the "theme.liquid" file before </body> tag.. b/w <style></style> tag..

Thanks!

 

 

Professional Shopify Custom Themes and Modifications. email info@bestchoiceindia.com https://experts.shopify.com/bestchoiceindia
0 Likes
Highlighted
Tourist
7 0 1

Sweet! I opened the file, and placed the code right above the </body> tag like this:

  <style>
  #PageContainer a.text-link {
    border-bottom: 1px solid #000;
    color: #000;
}
#PageContainer a.text-link:hover {
    border-bottom: 1px solid #d67a24;
    color: #d67a24;
}
  </style>

But it didn't seem to change anything! Am I doing something incorrectly?!

Thanks!

0 Likes
Highlighted
Shopify Expert
46 0 0

Yes... i could not find the code in your file... please check again the code was saved or not..

Thanks!

 

 

Professional Shopify Custom Themes and Modifications. email info@bestchoiceindia.com https://experts.shopify.com/bestchoiceindia
0 Likes
Highlighted
Tourist
7 0 1

Sorry! I had pulled it back out! It's back in there now at the bottom, but still no results! :(

0 Likes
Highlighted
Shopify Expert
9812 92 1574

Don't add the code to theme.liquid. You have a stylesheet, so for neatness the code should be added into that.

Doesn't Brooklyn already have options for setting link colours and hover colour? I can see that the stylesheet does use theme settings.

.rte a,
.text-link {
  color: $colorLink;

  &:hover {
    color: $colorLinkHover;
  }
}

What are you trying to do that the theme settings don't allow for?

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
Shopify Expert
46 0 0

Hello,

i am told code for only affected in hover color change on social icons.. it's working now in your site.. please revert back your old changes for hover color...

Thanks!

 

 

 

Professional Shopify Custom Themes and Modifications. email info@bestchoiceindia.com https://experts.shopify.com/bestchoiceindia
0 Likes
Highlighted
Tourist
7 0 1

Hey Jason!

Thanks for looking into this for me! I can adjust link color, but I am not able to control anything about hover. I think I saw what you're seeing, that is in the theme.scss.liquid file right? I think that is a default built in for the drop-down menus. They change color with hover! I'm just hoping to get other links like social media in the footer, navigational back buttons from product pages to change color with hover!

The code you suggested, would that go into the theme.scss.liquid file?

Thank you!!

0 Likes