Change highlighted body links to underline only

[SiobhanH]

Hi there

I want to change the links in my body copy from a highlighted text colour (site link colour and site link hover in the customiser) to an underline colour only, with the link hover as normal.

I found this thread, which is asking the same question (but also wants to bold text). However, the solution that worked for this user doesn’t work for me in my global CSS:

.single-post .entry-wrap a {
color: #000 !important;
text-decoration: underline;
}

How can I make this global change please?

Thanks

[mldarshana]

Hi There @SiobhanH

Thanks for writing in! That code will only applies for links on single blog posts only. If you want to target links of your body copy, try adding the following CSS rule into your X -> Theme Options -> CSS area.

body a {
    text-decoration: underline;
}

Hope that helps.

[SiobhanH]

Thanks, that worked!

I want the underline colour to be a different colour to the text though, what is the css I need to add this (I’ve tried but failed to separate the line colour from the text!)

[paul.r]

Hi,

If you would like it to be different color, you need to use border.
Please change the code provided with this.

body a {
    text-decoration: none;
    border-bottom: 1px solid red;
}

Hope that helps

[SiobhanH]

Thanks. I tried that code - it worked until I changed the text colour (in customiser) to black. It also underlined all body links e.g. the logo, the breadcrumb etc. Now it doesn’t work at all?

[jade]

Hi there,

Please try:

.entry-content a {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid red;
}

Hope this helps.

[SiobhanH]

Hi

No, that code didn’t change anything either. The global CSS seems unable to override the customiser settings.

[Prasant]

Hello @SiobhanH,

Thanks for updating the thread.

Please try following code and upon making the changes please clear browser cache:

.entry-content a {
    color: #000 !important;
    text-decoration: none !important;
    border-bottom: 1px solid red !important;
}

I also checked the website that’s listed on your licence manager page and seems that it’s not using X Theme. Can you please confirm?

Thanks.

[SiobhanH]

Hi

Yes, I am definitely using the X theme. Not sure why you can’t see it on my site.

I think I’m close to resolving the issue… The global CSS wasn’t working because it wanted me to update to the latest version for X.

Now the CSS is working, but it’s overriding the selected ‘hover’ colour defined in the customiser. So I’ve added the following and that seems to do the job:

.entry-content a:hover  {
      	color: #fcf300 
}

The issue I have now is that the below code is underlining all borders (borders on buttons etc), not just text…

.entry-content a {
    color: #000 !important;
    text-decoration: none !important;
    border-bottom: 1px solid red !important;
}

[SiobhanH]

I’ve fixed it - I removed the !important

[Prasant]

Glad to hear that.