Removing ugly underlines from foto links on debut

New Member
1 0 0

Hi all,

I have spent several ours trying to remove underlines from image links on the "debut" theme, I have already checked all recommendations in this board but nothing helps.

Maybe you have an idea how I can remove the underlines of uploaded images that are used as links? In the following I give you an example:

https://paraisodelbosque-shop.com/pages/frequently-asked-questions-faq 

Thank you very much for your support! :)

Best regards from Costa Rica
Jan

0 Likes
Highlighted
Shopify Partner
1841 170 484

Hi!

 

You would need to edit some styles to achieve that as well as editing your HTML content in your rich text editor from Admin UI (Option #2). Or you can simply remove these underlines in general (simpler, see Option #1).

 

So let's begin...

 

Option #1

 

 

Step 1

First you should always create a backup of your theme in case things go wrong. Go to Online Store > Themes then Actions > Duplicate. That's all it takes.

 

Step 2

Go to Actions > Edit code and from the editor that loads, open the Assets / theme.scss.liquid file in the left folder pane. Now find these exact lines of code

 

  a:not(.btn) {
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
  }

 

Just comment it out like so

 

/*
a:not(.btn) { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
*/

 

Hit Save and you're good to go.

 

 

 

Option #2

 

Step 1

First you should always create a backup of your theme in case things go wrong. Go to Online Store > Themes then Actions > Duplicate. That's all it takes.

 

Step 2

Go to Actions > Edit code and from the editor that loads, open the Assets / theme.scss.liquid file in the left folder pane. Now find these exact lines of code

 

  a:not(.btn) {
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
  }

 

And add following (notice the second :not(nl) in there) so its like

 

  a:not(.btn):not(.nl) {
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
  }

 

Okay, so what this does is - if the <a /> link has a class of btn or nl, do not apply the border-bottom etc. We added our custom little nl which I named so as a shortcut for no-line.

 

Hit Save.

 

Step 3

The problem is, your <a /> tags that contain images do not have this nl class added and there's no automatic way do do that. So you must edit the code in your article or page rich text editor where the image is contained and if you have a link defined as so (or similar)

 

<a href="/to/wherever">
  <img />
</a>

 

You need to add the class now like so

 

<a href="/to/wherever" class="nl">
  <img />
</a>

 

Save and repeat for other articles, pages etc. that have images in anchor tags. That's it.

 

Hope this helps!

I turn coffee in to code - since 1998
0 Likes