Remove lines under images with links on created pages

Remove lines under images with links on created pages

martinlass
Tourist
6 0 1

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...

Replies 8 (8)

dmwwebartisan
Shopify Partner
12321 2551 3715

@martinlass 

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

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
martinlass
Tourist
6 0 1

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!

Screen Shot 2020-12-18 at 1.51.49 pm.png

dmwwebartisan
Shopify Partner
12321 2551 3715

@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! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
martinlass
Tourist
6 0 1

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
Shopify Partner
12321 2551 3715

@martinlass 

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

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
martinlass
Tourist
6 0 1

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
Tourist
6 0 1

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

martinlass
Tourist
6 0 1

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!