[TanglewoodPubParticipant]

Hi there,

I’m trying to underline the text links on any page on my site, but not underline links in buttons, or icons that are links, menu items, or images that are links, and so on. Just plain text.

I have the following code that I found in one of the other threads in my customizer, but it’s not working for all pages as I’ve shown in the pictures attached:

body .entry-content a:not(.x-btn) :not(.x-icon) {
text-decoration: underline !important;
}

body .x-navbar a {
text-decoration: none !important;
}

body .x-colophon a {
text-decoration: none !important;

Thanks so much for your help!

Wordpress version: 4.5.3
Themeco version: 4.6.1
Cornerstone version: 1.3

[TanglewoodPubParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

Please try to add this code:

.entry-content a,
.x-text a {
    display: inline-block;
    border-bottom: 1px solid rgb(71,99,30);
}

Hope this helps.

[TanglewoodPubParticipant]

Hi Jade,

Thanks for your response! It almost works, but there are a few problems.

1) With this code it’s also underlining pictures, which I don’t want it to do
2) The line is a little bit far away from the text so it doesn’t quite look like a link underline. Is there a way I can mess with the line-height of the underline to get it closer to the text?
3) The line doesn’t change color when you hover over the link like a normal link underline would.

Thanks so much for your continued help!

[RupokMember]

Hi there,

Thanks for writing back. You can try the first solution. Since the code was a bit incomplete; let’s try adding this under Custom > CSS in the Customizer :

body .entry-content a:not(.x-btn), body .entry-content a:not(.x-img), body .entry-content a:not(.x-icon) {
  text-decoration: underline !important;
}

body .x-navbar a {
  text-decoration: none !important;
}

body .x-colophon a {
  text-decoration: none !important;
}

Hope this helps.

[TanglewoodPubParticipant]

Hi,

Thanks for your response!

I just want to make sure I’m understanding correctly. I’ve added the part about a:not(.x-img) to my existing code but this solution does not help with the fact that by adding the below code

.entry-content a,
.x-text a {
    display: inline-block;
    border-bottom: 1px solid rgb(71,99,30);
}

**The line is a little bit far away from the text so it doesn’t quite look like a link underline. Is there a way I can mess with the line-height of the underline to get it closer to the text?

**The line doesn’t change color when you hover over the link like a normal link underline would.

Are you suggesting I don’t use the border-bottom code? If not, some links still are not getting underlined.

Thanks so much.

[FriechModerator]

Hi There,

Sorry but this is getting a little bit confusing. From what I understand on your first post, you want an inline text link to have an underline but not the other links, yes? If so, then we should only work on the inline text link because by default links on X has no underline.

You might want to assign a class to your inline text link instead.

e.g.
<a href="#" class="underlined-link">This is link</a>

And then add this on your custom CSS to put an underline on that link.

.underlined-link {
	text-decoration: underline;
}

Make sure you remove your previous css code regarding this to avoid conflict.

Hope it helps, Cheers!

[TanglewoodPubParticipant]

Hi Friech,

When you say add a class, does this mean within cornerstone to put the underlined-link within the class section or I have to manually do this for each and every link I put on my site?

Many thanks!

[RupokMember]

Hi there,

Kindly follow the example above given by Friech. You need to add this to the anchor tag.

Thanks!

[TanglewoodPubParticipant]

Hello,

Thanks for your reply. To answer my question above, yes. I need to add this class part to every link I place on my website.

It does work, and I’ve taken out the extra code.

[JoaoModerator]

Hi There,

Thanks for letting us know

Please reach us in case you need further help.

Joao

[Author]

Posts