Change a link colour without affecting the rest of the theme colours

Highlighted
New Member
3 0 0

Hey, so I've seen this question answered before when applied to different items like the menu but still can't figure out how to apply it to this one.

So I've added a custom weather widget to the homepage using the custom HTML section. The problem is that its also a link and therefore it's underlined. the only way to get rid of the underline is to make it white so it blends into the background but the "Links & Primary Button Background" option which control this will change all of the other buttons throughout the site and make them invisible too.

Is there a way to isolate only that link and change it?

Using Simple Theme btw.

Thanks!

0 Likes
Highlighted
Shopify Partner
41 5 9

There is a way to isolate the styles of a single link, but you will need to use css for this.

 

a {
  text-decoration: none;
}

 

The above code will remove the underline from all links.

The below code will remove the underline from links contained within an element with the classname weather-widget.

 

.weather-widget a {
  text-decoration: none;
}

 

0 Likes
Highlighted
New Member
3 0 0

Hey, thanks for the reply! 

Still a little lost as to where I place that code though. I'm guessing the custom HTML section is the "advanced-content.liquid" section?

Ive tried pasting that code (replacing the name with"weatherwidget-io") as thats the class name but still no luck.

This is the section with the underline with the name highlighted on the left.

 

Screen Shot 2020-07-14 at 13.31.38.png

 

Sorry if i'm missing something obvious, I'm not well versed in this stuff!

Thanks : )

0 Likes
Highlighted
Shopify Partner
41 5 9

@casinohardware the code needs to go in your themes .css or .scss file. You can add it using the Shopify Code Editor.

 

I cannot be certain that the class that you are using is the correct class as I cannot see the code generated by the JavaScript without actually viewing the website.

0 Likes
Highlighted
Shopify Partner
1359 184 433

In this case you can go into your theme.scss.liquid file in your assets folder, scroll to the very bottom and add:

a.weatherwidget-io {
text-decoration: none;
} 

 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
3 0 0

Thanks for your help! Turns out the "text decoration" thing didn't work but "border-bottom: none;" did the trick. 

0 Likes
Highlighted
Shopify Partner
1359 184 433

Yeah, typically <a> tags have a text decoration by default, some themes get rid of the text decoration and use a border-bottom. Glad you got it figured out.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes