[Resolved] Link formatting for all content except, menus and sidebars

[Ian]

I’m trying to achieve the link color and hover as shown on this site, https://demo.studiopress.com/academy/ for the read more link in the instructor section of the home page (4 sections from the top).

The link has this color, #DF2E35 and is underlined. On hover the link turns black and the underline disappears.

I would like this format to to appear throughout my site but when I change this in the colours section of the customizer it effects my sidebar links which I don’t want affected.

Is there a way to have my desired format work on pages and posts but not menus such as the header or sidebars? I want to keep the exiting formatting for those.

As you can see on my blog post in the, What’s covered in this lesson section towards the bottom of the page the links are not very obvious. https://www.techconfidence.com.au/android/u3a-android-fundamentals-course-lesson-4-file-management-and-virus-protection/

[David]

Hi there,

this CSS will add the underline and removal of hover for links within the content:

#main .entry-content a {
    text-decoration: underline;
}

#main .entry-content a:hover {
    text-decoration: none;
}

By default Sidebar and Footer widget links inherit the Content link colors. But in the Customizer > Colors > Sidebar Widgets / Footer you can set them to their own colors.

[Ian]

Thanks David,

That seemed to work. The only thing is, it’s added underlines to buttons, as you can see on the home page. Is there any way I can exclude them?

[Leo]

Hmm give this a shot:

#main .entry-content a:not(.pp-button) {
    text-decoration: underline;
}

#main .entry-content a:hover:not(.pp-button) {
    text-decoration: none;
}

[Ian]

Hi Leo,

Sorry about the late reply.

That didn’t seem to work.

[Leo]

The old CSS is still showing:
https://www.screencast.com/t/Lp549O4HAJk

Make sure you to replace David’s code with my code.

[Ian]

Fixed, thanks very much.

[Leo]

No problem 🙂

[Author]

Posts