[Resolved] How to override global underline CSS code

Home Forums Support How to override global underline CSS code

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #943143
    Tom

    Hi, I had a question in another thread about underline that was answered by Leo.

    This is the CSS I inserted into GeneratePress:
    .site-content a {
    text-decoration: underline;
    }

    It works fine but there are a few cases where I don’t want a link to be underlined. I am using Elementor page builder and have tried toggling “decoration” to “none”, but it doesn’t seem to get rid of the underline.

    Here is the URL of my page: https://www.thedermdetective.com/how-to-get-rid-of-acne-scars/

    The underline shows up in the table of contents where I have internal links within the article. How can I remove this underline manually?

    Thanks,
    Tom

    #943146
    Leo
    Staff
    Customer Support

    Hi there,

    What if we do this so the CSS only applies to pages that aren’t using Elementor?

    body:not(.elementor-default) .site-content a {
        text-decoration: underline;
    }

    Let me know 🙂

    #943363
    Tom

    Ah I see. However, all of my pages use Elementor…

    Did you mean for me to try making a page without Elementor and see if that works?

    Thanks,
    Tom

    #943368
    Leo
    Staff
    Customer Support

    Hmm a bit tricky to exclude just that one section for sure.

    So you want no underline under the Contents section at all?

    #944194
    Tom

    That’s right, just for those headings in this table of contents. Everywhere else in this article is fine.

    By the way, it seems that I can override the global CSS with Elementor’s button elements by setting “decoration” to “none”. However, doing the same with heading elements doesn’t seem to work.

    Do you have any other suggestions to try? Thanks for your help!

    #944231
    Leo
    Staff
    Customer Support

    Try this for your full CSS:

    .site-content a {
        text-decoration: underline;
    }
    .site-content .elementor-element-841a1d3 a {
        text-decoration: none !important;
    }
    #944331
    Tom

    Awesome, that was like magic! It works now, thanks.

    So does the “.elementor-element-841a1d3” part just work on headings? Want to make sure I understand how this bit of CSS works for my own reference in case of future problems.

    Thanks,
    Tom

    #944399
    Leo
    Staff
    Customer Support

    That is the ID of that Elementor section.

    The second block of CSS basically overwrites the first block of CSS as it’s more specific.

    #964527
    Tom

    Hi again,

    Regarding the same topic on applying a global underline, is it possible to apply a color to the underlined link based on what the linked URL is?

    In my case, I would like to color all URLs pointing to “amazon.com/***” a certain color. Currently I am doing this by hand so wanted to check if there was a CSS solution.

    Thank you!

    Tom

    #964530
    Leo
    Staff
    Customer Support

    Hmm you’d have to add a class for the link:
    <a href="https://AMAZONLINK/" class="amazon-link">LINK TEXT</a>

    Then we can color with this CSS:

    a.amazon-link {
        text-decoration-color: #000;
    }
    #964614
    Tom

    Thanks Leo – Do I add the class in the custom CSS section? Sorry I’m not familiar with it.

    Also is it possible to use a wildcard to denote all URLs with the root domain of (in this example) “amazon.com/*”?

    Thanks,
    Tom

    #964621
    Leo
    Staff
    Customer Support

    Oops somehow I left out the link in my HTML above:
    https://generatepress.com/forums/topic/how-to-override-global-underline-css-code/#post-964530

    Also is it possible to use a wildcard to denote all URLs with the root domain of (in this example) “amazon.com/*”?

    Not I’m aware of unfortunately. Will need a custom solution for that.

    #964644
    Tom

    Great, thanks for confirming!

    #965147
    Leo
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.