[Resolved] Underline and Highlight Links (Exclude Images)

Home Forums Support [Resolved] Underline and Highlight Links (Exclude Images)

Home Forums Support Underline and Highlight Links (Exclude Images)

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1485801
    Felix

    Hello team,

    I implemented a few lines of css that shall underline and highlight links. It is doing this for all links now, text and images and looks weird.
    Would you be able help and advice how to limit it to text only?

    Kind regards

    Osman

    /* links are underlined (border-bottom) */
    .entry-content a {
      border-bottom: 2px solid #f4b429;
      display: inline-block;
      line-height: 1.25;
        }
    
    .entry-content a:hover {
        background-image: linear-gradient(120deg, #f4b429 0%, #f4b429 100%);
        background-repeat: no-repeat;
        transition: background-size 0.125s ease-in;
    }
    
    #1485814
    Elvin
    Staff
    Customer Support

    Hi,

    To limit it to text only, you’ll have to add more specificity in your CSS selectors.

    Your code as it is lacks specificity as it selects ALL links inside .entry-content. To add specificity, you need to get the css class of atleast your link text’s parent so you can select them specifically.

    You can check for css classes by inspecting your site.

    Example: You can inspect your site on Google Chrome by pressing CTRL + SHIFT + I when you visit your page.

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

    #1485826
    Felix

    Hi Elvin,

    Yes, that s what I assumed. Unfortunately, my CSS skills are rather limited: I created the CSS from various sources in the GP and other forums. Would you happen to know, which the class of the link text’s parent, that you re referring to, is? I am using the Merch Theme.

    And that class-ID I must put between .entry-content and a{?

    Thank you

    #1485871
    Elvin
    Staff
    Customer Support

    I’ve checked your site and it is indeed tricky to style your anchor tags because they don’t have classes and falls under .entry-content > ul > li > a for both image and text links.

    They also don’t have unique attributes to each of them making it extra tricky.

    And that class-ID I must put between .entry-content and a{?

    For starters, if possible, try to add classes to your content blocks.

    You can either do that manually, meaning you have to edit your contents to add them yourself. Note: this could be tedious, especially if you already have plenty of content.

    Or

    You can programmatically do it by JavaScript. (adding classes after DOM Content is Loaded)

    But I’m afraid customization from scripting is outside of our support’s scope.

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

    #1486592
    Felix

    I understand. Thanks for the suggested solutions: I ll try to implement them.

    In the meanwhile, should you come up with another (easier) option, please let me know.

    Have a nice day!

    #1487383
    Elvin
    Staff
    Customer Support

    No problem. 🙂

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

    #1506984
    Felix

    A follow up question on link-formatting: I am trying to break the words in long links, in order for it to be displayed in more then one line, when displayed on a small screen.
    I added two lines of css (overflow-wrap: break-word; word-wrap: break-word;), but it doesn’t get me what I want.
    Could you have a look at the provided link and let me know, if you know what the issue might be?
    Merci

    /* links are underlined (border-bottom) */
    .entry-content a {
      border-bottom: 2px solid #f4b429;
      display: inline-block;
      line-height: 1.25;  
      overflow-wrap: break-word;
      word-wrap: break-word;
        }
    #1507066
    Elvin
    Staff
    Customer Support

    To clarify, are you trying to achieve this? https://share.getcloudapp.com/xQuAREQj

    If so, try replacing this property:

    border-bottom: 2px solid #f4b429;

    with these properties –

    text-decoration: underline;
    text-decoration-color: #f4b429;
    text-underline-position: under;

    Note: text-decoration styling is limited.

    Ideally, we want to use .entry-content a > * selectors but the problem is, your anchor links are formatted inconsistently.

    Some content links are structured <em><a>...</a></em> while some have <a><em>...</em></a> which is a nightmare to style.

    <a><em>...</em></a> format is preferrable. If you can fix that, we could use .entry-content a > * and then add .entry-content a > img{border:none} on top of it so images won’t have underline.

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

    #1507107
    Felix

    Thank you, Elvin!

    #1507114
    Elvin
    Staff
    Customer Support

    No problem. Glad to be of any help.

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

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