[Resolved] Class needed for all links except for buttons, menu items, archive-headlines etc

Home Forums Support [Resolved] Class needed for all links except for buttons, menu items, archive-headlines etc

Home Forums Support Class needed for all links except for buttons, menu items, archive-headlines etc

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #2040862
    Sascha

    Hey there

    I wanted to apply an animated underline to all links of this site and have used the following css:

    /* LINKS - Underline on Hover */
    a {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .4s;
    }
    a:hover, a:focus {
    background-size: 100% 2px;
    }

    Unfortunately, the effect is also applied to all menu-items, buttons and archive-headlines, obviously due to an incomplete classification of the css.

    I have removed the above-mentioned CSS for now, but would live to add this effect back.

    Could you please help with this?

    By the way: Do you provide a comprehensive list of all the CSS used in GP including screenshots/examples of where they are used/applied?

    Thank you in advance and kind regards,
    Sascha

    #2040919
    Elvin
    Staff
    Customer Support

    Hi Sascha,

    We can modify the CSS a bit so it doesn’t include buttons from GenerateBlocks.

    Example:

    a:not(.gb-button) {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .4s;
    }
    a:not(.gb-button):hover, a:not(.gb-button):focus {
    background-size: 100% 2px;
    }

    If you have buttons not added by GB, can you point us to it? So we can inspect it and figure out a selector that can work for exemption. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2041777
    Sascha

    Thanks, now it hay stopped underlining the buttons, which is good.

    However, how to disable the effect for menu-items as well as headlines, like the ones on the blog-page?

    Needed to disable the CSS and wait for your next advise before re-enabling the CSS-code again πŸ˜‰

    Thanks
    Sascha

    #2041796
    Ying
    Staff
    Customer Support

    Hi Sascha,

    Can you try using .inside-article a:not(.gb-button):not(.button):not(.entry-title a) instead of a ?

    #2042050
    Sascha

    Thanks. I have replaced the a with your code, so it was like this:

    /* LINKS - Underline on Hover  */
    .inside-article a:not(.gb-button):not(.button):not(.entry-title a) {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .4s;
    }
    .inside-article a:not(.gb-button):not(.button):not(.entry-title a) {
    background-size: 100% 2px;
    } 

    But then there was no underline at all. I have also tried to disable the “Underline Links” feature in customizer, but same result.

    I need the animated underline-effect only for “normal” links, also footer-links, but not on headlines, buttons or menu-items.

    #2042064
    Elvin
    Staff
    Customer Support

    The :hover and :focus states where missing.

    Try this:

    /* LINKS - Underline on Hover  */
    a:not(.gb-button, .entry-title a, .button, .main-navigation li a) {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .4s;
    }
    a:not(.gb-button, .entry-title a, .button, .main-navigation li a):hover, 
    a:not(.gb-button, .entry-title a, .button, .main-navigation li a):focus  {
    background-size: 100% 2px;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #2090441
    Sascha

    Hello,

    thanks for this!

    now I wonder about how to use other global color for this effect?

    Currently, it seems that
    background-image: linear-gradient(#currentColor,currentColor)
    will use the “contrast” global color. How can I use the “accent” global color instead?

    Thank you in advance and kind regards,
    Sascha

    #2090576
    Sascha

    Please ignore my last reply, I have realized that it’s using the color which is defined in Colors > Body > Link.

    Problem solved!

    #2091257
    Elvin
    Staff
    Customer Support

    Thanks for letting us know. Glad you got it sorted. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.