Remove lines under images with links on created pages

[martinlass]

I have searched the entire database here for a solution to removing the lines that appear under images that are also links. I'm talking about when creating Pages.

I've tried the following suggested solutions, but none of them works as I want them to work:

.rte{ border-bottom:none !important;} // THIS REMOVES ALL UNDERLINES - I only want to remove the lines under IMAGES with links.

.rte a{ border-bottom:none !important;} //THIS DOES NOT WORK

a:not(.btn) {
border-bottom: 0px solid currentColor;
padding-bottom: 1px;
} //THIS DOES NOT WORK

.rte img:not(.btn) {
border-bottom: none;
} // THIS DOES NOT WORK

.rte a img:not(.btn) {
border-bottom: none;
} // THIS DOES NOT WORK

I am using Debut theme. I am very familiar with editing code.

Here is an example page: https://www.martinlassstore.com/pages/explore-your-teslas-options

If you scroll down to 1. Personal Pendants, you will see that this text is a link. The images below are also links and have lines under them. I want to remove these lines below the image/links.

Thanks in advance...

[dmwwebartisan]

@martinlass 

I searched " Personal Pendants" on our page but I can't see the underline and links. Can you please provide a screenshot?

Thanks!

[martinlass]

Here is a screenshot... note the lines under the text, "1. The Personal Pendant," which is fine, and under the 6 images below, which is what I'm trying to remove.

Thanks!

[dmwwebartisan]

@martinlass 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.template-page .rte a:not(.btn){
border-bottom: 0px !important;
}

Hope this helps.

Thanks! 

[martinlass]

Thanks! Your suggested code, like the following code:

.rte a{ border-bottom:none !important;}

does in fact remove the underlines from the images, but it also removes the underlines from the text links.

Is it possible to just remove the underlines from the images?

I notice that both code snippets include

"a:not(.btn)"

The text links are not buttons, so what could one put instead of ".btn" to exclude text links from the "border-bottom:none" code?

Hope that makes sense!

[dmwwebartisan]

@martinlass 

To remove underline only for images. I will check further and get back to you with a solution soon.

Thanks!

[martinlass]

Thanks!

I've been researching further, too.

I found this idea here: https://css-tricks.com/almanac/selectors/n/not/

After adding your initial code, which removes ALL underlines from ALL links, text or image (but not buttons), I tried putting the following into theme.custom.css (did not work in theme.scss.liquid):

a:not(.different):not(.btn) {
  border-bottom: 0px !important;
}

...and adding this class to the <a> tag associated with the TEXT link.

<a href="https://www.martinlassstore.com/collections/teslas-innovational-technologies/products/teslas-innovational-technologies-personal-pendants" class="different"><strong>The Personal Pendant</strong></a>

...and this works... but ONLY for the single text link! But this is VERY clumsy and means that ANY text link in ANY page I create will have to have this class added manually.

If you come up with any other ideas, I'd be very pleased!

Cheers,

Martin

[martinlass]

Correction: The previous code works WITHOUT the original code you suggested.

[martinlass]

Figured out one way that works! It only requires that all text links that I want to be underlined be inside a <p> tag. Any text links that are not will not be underlined.

Most importantly, it removes underlines from all images containing links! 🙂

In theme-custom.css (using Debut Theme, for anybody just tuning in), I added this at the bottom:

a:not(.btn) {
  border-bottom: 0px !important;
}

Then, in theme.scss.liquid, in the Paragraph styles section, I added an <a> child... "text-decoration: underline"... to the <p> tag... don't know if I'm saying this correctly, but the code is clear:

p {
  color: $color-body-text;
  margin: 0 0 ($section-spacing-small / 1.8);

  @include media-query($small) {
    font-size: em($font-size-base - 1);
  }

  &:last-child {
    margin-bottom: 0;
  }
  a {
    text-decoration: underline;
  }
}

The effect of these two code snippets is that all underlines are removed from all links, whether text or image, but I can selectively add the underlines back by putting the linked text inside a <p> tag.

If anybody has a more eloquent solution, I'd be happy to see this.

Thanks!

[littleplayco]

Hi...

Under what section do I find In "theme-custom.css" (using Debut Theme" to add the code at the bottom...

I appreciate any help with this:)

Thank you!