Twenty Twenty Theme: Remove underline in hyperlinks and add hover color

  • Resolved eenger

    (@eenger)


    4 years, 7 months ago

    Hi:

    I am using the twenty twenty theme and want to REMOVE all underline and automatic color in hyperlinks and instead replace with just a hover color. I have tried using snippets of code that other themes’ support pages recommended, but those don’t work for Twenty Twenty.

    The page I need help with is: [ redundant link removed ]. I want to use the hyperlink the titles on each article instead of using a button.

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

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

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

  • Hi @eenger

    You can use following CSS code to remove all underline and automatic color in hyperlinks and can replace hover color of your choice.
    Please add following CSS from Appearance->Customize->Additional CSS 

    
.primary-menu li.current-menu-item > a, .primary-menu li.current-menu-item > .link-icon-wrapper > a {
    text-decoration: none!important;
}

li a:hover {
    text-decoration: none!important;
    color: lime!important;
}
a {
    color: #000!important;
}

    Do let me know how the code works.

    Regards,
    Ruchit

    Thread Starter eenger

    (@eenger)

    Thanks for getting back to me! Unfortunately, the code snippet doesn’t quite work. It changes all the links to a color permanently, then fades to black when I hover. I want everything to stay black, but fade to the color at hover. Also, it didn’t remove any of my underlines. The underlines disappear at the hover; I want them gone completely.

    I also noticed that when I put it into my Additional CSS on my customizer that it changes too many links – even my menus and site title. Can I just add it to the “additional CSS class” section for each specific block that I hyperlink instead, so that I can control what gets changed? Or does it have to be applied in the customizer?

    Thanks so much!

    Hi @eenger
    To change all link color to black apply following CSS:

    
a {
    text-decoration: none!important;
    color: black!important;
}

    To get color on hover on all links apply CSS mentioned below:

    
a:hover {
color:lime!important;
}

    To change hover color for particular link use class (Below class is for post link)

    
.wp-block-coblocks-service__content a:hover {
    color: red!important;
}

    Regards,
    Ruchit

    Thread Starter eenger

    (@eenger)

    This worked! Thanks so much!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Twenty Twenty Theme: Remove underline in hyperlinks and add hover color’ is closed to new replies.