Remove hyperlink underlines added in the recent OceanWP theme update

  • Resolved adamlockwood

    (@adamlockwood)


    4 years, 3 months ago

    Hello,

    How can I remove the underlines that were added to content links per WordPress accessibility requirements in the latest OceanWP theme update (*2020.12.16.* – 2.0.1)? I use an OceanWP child theme, but the recent theme update added an underline and dotted hover underline to every hyperlink on my site.

    Note: I need to remove the underline and dotted hover underline from ALL the hyperlinks on my site.

    In Appearance > Customize > Custom CSS/JS, I’ve tried the following CSS: 

    a {
border: none;  
text-decoration: none;}
    a:focus {
border: none;  
text-decoration: none;}

    Note: I also tried {border: 0;} for both a and a:focus.

    Nothing is working. I’d greatly appreciate any assistance you can provide.

    My site URL: [ redundant link removed ]

    • This topic was modified 4 years, 2 months ago by Jan Dembowski.

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)

  • They wrote:

    ### *2020.12.16.* – 2.0.1

    * **Added** – Content links underlined per WordPress accessibility requirements.

    * **Tweak** – Default Body text color altered for increased contrast & accessibility requirements.

    But they must give us the possibility do remove/change something…

    Yes, this white background is horrible, especially in your website.

    • This reply was modified 4 years, 3 months ago by scarpinoc.

    You can try to use the ‘important’ directive to force your settings to be applied last in the style chain:

    a {
    border: none!important;
    text-decoration: none!important;
    }
    a:focus {
    border: none!important;
    text-decoration: none!important;
    }

    Hello,

    Please try to update the theme to the latest version 2.0.2 to fix the issue.

    Or you can use the below CSS code to fix the issue.

    .single .entry-content a, .page .entry a {
text-decoration: none;
}
.single .entry-content a, .page .entry a:hover {
text-decoration: none;
}

    PS- In case CSS “doesn’t listen”, append !important

    Thread Starter adamlockwood

    (@adamlockwood)

    Thank you all for your responses!

    @abhikr781 – The CSS solution you provided removed the a and a:hover links, but I’m still getting the dotted underline and white background when I click on a link. I tried the path you provided for the others on a:active, but that didn’t fix it. Is there a way to address this?

    • This reply was modified 4 years, 3 months ago by adamlockwood.
    Thread Starter adamlockwood

    (@adamlockwood)

    @abhikr781 – I got everything back to how it was before. Thank you so much for your response and the theme update!

    Thread Starter adamlockwood

    (@adamlockwood)

    This has been resolved.

    You are most welcome and Glad to hear that issue has been resolved ??

    None of the suggestions worked for my site…

    my solution – 

    .single-post:not(.elementor-page) .entry-content a, .page:not(.elementor-page):not(.woocommerce-page) .entry a {
    text-decoration: none;
}
.single-post:not(.elementor-page) .entry-content a:hover, .page:not(.elementor-page):not(.woocommerce-page) .entry a:hover {
    text-decoration: none;
}
    • This reply was modified 4 years, 3 months ago by rike96.

    @rike96 This actually worked for me! Thank you!

    @rike96 Thanks bro…your solution is work form me!

    Hello,

    I have the same problem, with the links, be it text or button, the white background appears when I click.

    But it is not solved with any of the codes provided. I’ve also tried adding “! Important” but it doesn’t work either.

    To do a test I have created a new website without plugins, only with the Ocean theme with the latest update and it does not work with any code either …

    I send the link: https://prova01.ansesis.eu/01-2/

    Any more solutions? I have updated the Ocean theme.

    Thanks!

    Hello ,

    Please replace the previous code with this one and check.

    .single .entry-content a, .page .entry a {
    text-decoration: none !important;
    background-color: transparent !important;
}
.single .entry-content a, .page .entry a:hover {
text-decoration: none;
}
    • This reply was modified 3 years, 10 months ago by Abhishek.
Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Remove hyperlink underlines added in the recent OceanWP theme update’ is closed to new replies.