Twenty Seventeen Hyperlink Text Underline

  • Resolved atanase

    (@atanase)


    6 years, 7 months ago

    Dear all,

    I am having an issue with removing one or all hyperlink(s) text underline from my website. After days of researching I have exhausted pretty much all CSS code I could find on forums.

    Things I have tried include: change text from paragraph to header text (1,2,3 etc), changed the text decoration in theme’s default typography to “none” on all the theme text, used all available CSS codes I could find, I even removed all CSS I already have and only entered specific CSS for removing underlined text from hyperlinks.

    The is is available on browsers on mobile, Windows and OS X.

    Many thanks in advance!

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    In the “Additional CSS” section of the dashboard add this:

    
.entry-content a, 
.entry-summary a, 
.widget a, 
.site-footer .widget-area a, 
.posts-navigation a, 
.widget_authors a strong,
.entry-content a:hover, 
.entry-summary a:hover, 
.widget a:hover, 
.site-footer .widget-area a:hover, 
.posts-navigation a:hover, 
.widget_authors a strong:hover {
    box-shadow: none;
}

    https://codex.www.ads-software.com/CSS#Custom_CSS_in_WordPress

    But how will people know your links are links? Generally you can’t use colour alone these days as that will discriminate against people with visual impairments like colour blindness. An underline or a different font weight is a quick-win for making links visible for everyone.

    Thread Starter atanase

    (@atanase)

    Thank you Andrew! It is nice to have the option, I can always underline hyperlinks that I want to make more obvious.

    Great stuff!

    this was making me pull my hair out for awhile.

    It’s the stupid box shadow. This has to be the most annoying use of a box shadow I’ve ever seen. What’s the point?

    SDN

    (@susan-ideology)

    Hi Andrew, thanks for the tip about keeping the underline for accessibility. However I wonder if you can tell me how i can change the colour of the hover transition from the default black?
    Many thanks,

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @highprrrr, It was implemented using ‘box-shadow’ for a transition animation. The ‘text-decoration’ property does not respond to transition events.

    @susan-ideology, try:

    
.entry-content a, 
.entry-summary a, 
.widget a, 
.site-footer .widget-area a, 
.posts-navigation a, 
.widget_authors a strong,
.entry-content a:hover, 
.entry-summary a:hover, 
.widget a:hover, 
.site-footer .widget-area a:hover, 
.posts-navigation a:hover, 
.widget_authors a strong:hover {
    box-shadow: 
       inset 0 0 0 rgba(0, 0, 0, 0), 
       0 3px 0 pink;
}

    “pink” being the colour you change.

    If that doesn’t work, let’s open a new thread.

    SDN

    (@susan-ideology)

    Hi, afraid this doesn’t work Andrew so will start a new support thread

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Twenty Seventeen Hyperlink Text Underline’ is closed to new replies.