• Resolved robmccance

    (@robmccance)


    Hi team,

    I apologize for the basic question, but I ask because I want to do it the “proper” way in TT3, if there is one.

    Check the columns on the front page of my site, just below the header.

    I want to remove the underlines on the links in the columns.

    That should probably be an option in the link style in the block editor, but I’m not seeing it.

    How should I remove them?

    Thanks very much!
    Rob

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hi @robmccance

    That should probably be an option in the link style in the block editor, but I’m not seeing it.

    Underlines on text links are important for web accessibility, so that’s likely why there is no option in the block editor.

    I apologize for the basic question, but I ask because I want to do it the “proper” way in TT3, if there is one.

    Check the columns on the front page of my site, just below the header.

    May I ask, if you remove the underlines, how will people know those phrases are clickable if they are the same colour as the surrounding text?

    While it’s not possible to remove the underlines in the editor, you can add custom CSS to accomplish it.

    /* Remove underlines on links */
    a:where(:not(.wp-element-button)) {
      text-decoration: none;
    }

    While the Customizer is not exposed by default when using Site Editing, you can still access it manually by adding /wp-admin/customize.php after your URL. You can then add custom CSS in the Additional CSS area.

    Thread Starter robmccance

    (@robmccance)

    KP – excellent. Done!

    Thank you!

    Thread Starter robmccance

    (@robmccance)

    Oops, sorry, I glossed right over your Q.

    May I ask, if you remove the underlines, how will people know those phrases are clickable if they are the same colour as the surrounding text?

    Good point and unless I change the color, only by the little hand appearing on hover.

    It’s kind of an intelligence screen. 🙂

    Sarcasm aside, I might make the color change on hover. [update: done]

    Rob

    • This reply was modified 3 years, 2 months ago by robmccance.
    • This reply was modified 3 years, 2 months ago by robmccance.
    Moderator Kathryn Presner

    (@zoonini)

    It’s kind of an intelligence screen.

    Please keep in mind that figuring out that something is a link is completely unrelated to intelligence. Making links easily distinguishable is not only an accessibility concern, it’s an important usability best practice. Also bear in mind that on mobile, there is no hover state.

    That said, it’s your site, so you can of course proceed as you wish. 🙂

    Thread Starter robmccance

    (@robmccance)

    That said, it’s your site, so you can of course proceed as you wish. 

    Yeah, but those are great points. I’m a rookie webdev so this info is quite valuable. Playing with it on my phone now and yeah, its definitely confusing causing!

    I bet one could code it where the lines appear on a mobile device but not on a non-mobile. But that’s way above where I am and I assume would be done in the style json

    Not worth the efort

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

The topic ‘Removing link underlines’ is closed to new replies.