[Support request] Underline all p links, but not in one specifik container

Home Forums Support [Support request] Underline all p links, but not in one specifik container

Home Forums Support Underline all p links, but not in one specifik container

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1975491
    blackbird

    Hi, I think I have read you are working on a change when it comes to underlining links. Right?
    In the meantime I have added a custom CSS code to underline all links in paragraphs. And to not underline on hover.

    
    /* Links */
    .entry-content p a {
    	text-decoration: underline;
    }
    .entry-content p a:hover {
    	text-decoration: none;
    }
    

    But now I have made a container with some paragraph-links that I do NOT want to be underline at all. How can I exclude only them? I have tried to add a CSS class specifik to them, but my other custom CSS overrules my attempts…

    I initially wanted them to be buttons, but as far as I can see buttons can only be centered (?), and I want these to be left aligned like a list. Maybe it is easier to make them as buttons again and add some CSS to left align them, than to add CSS to NOT underline only these p-links??

    #1975513
    Elvin
    Staff
    Customer Support

    Hi there,

    You should add Additional CSS Class(es) to the paragraph blocks you want links to be underlined.

    Example: add underlined-links class to the paragraph block (or any block) and then add this CSS:

    /* Links */
    .entry-content .underlined-links a {
    	text-decoration: underline;
    }
    .entry-content .underlined-links a:hover {
    	text-decoration: none;
    }

    With this CSS, links within blocks with underlined-links are the only ones will have the styling. 😀

    #1975526
    blackbird

    Hmm.. I have to think about that, we have a big complex site, so it will be a lot of places to add that CSS-class (and try not to forget to do it in new blog-posts in the future, etc).
    It would be easier if I could just “undo” underline for this particular container/these few links…

    #1975533
    Elvin
    Staff
    Customer Support

    Hmm.. I have to think about that, we have a big complex site, so it will be a lot of places to add that CSS-class (and try not to forget to do it in new blog-posts in the future, etc).
    It would be easier if I could just “undo” underline for this particular container/these few links…

    The inverse alternative is to add no-underline-links to the blocks you want no underline on links.

    Example:

    /* Links */
    .entry-content *:not(.no-underline-links) a {
    	text-decoration: underline;
    }
    .entry-content *:not(.no-underline-links) a:hover {
    	text-decoration: none;
    }

    Or try to determine if any paragraph blocks have a specific thing they have in common. Perhaps that something in common comes from a class w/c you can use as a selector for inclusion/exclusion. 😀

    #1975560
    blackbird

    Thank you for that code! I did try something similar but did not know the right way. If I change your “undeline” in the first part to “none”, and add p (probably since I use p in my other custom code), then it works like a charm!! 🙂

    
    /* Links */
    .entry-content *:not(.no-underline-links) p a {
    	text-decoration: none;
    }
    .entry-content *:not(.no-underline-links) p a:hover {
    	text-decoration: none;
    }
    
    #1977136
    Elvin
    Staff
    Customer Support

    Glad you got it sorted. 😀

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