[Support request] Exclude Specific Blocks from CSS code for underlined links

Home Forums Support [Support request] Exclude Specific Blocks from CSS code for underlined links

Home Forums Support Exclude Specific Blocks from CSS code for underlined links

  • This topic has 7 replies, 2 voices, and was last updated 1 month ago by Elvin.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2049465
    Steph

    Hey,

    I finally got around to adjusting the way my links look by adding lines (in a rather specific way). I’m quite happy with it, but there is one issue. I would love to exclude 2 sections on my landing page (see: https://www.anomadspassport.com/ > Featured Guides + Bucket List Destinations).
    Is there any way to exclude these heading blocks with a background?

    Thank you!

    My code:
    (somehow failed to combine .entry-content p and .entry-content ul, so I’d appreciate it if you could also tell me how to do it as I clearly failed to do so)

    /* underlined links in content area*/
    
    .entry-content p a:link {
      background-color: base-2;
        color: base-2;
      background-image: linear-gradient( transparent calc(100% - 1.45em), #C8B1A0 10px, #C8B1A0 10px , transparent 6px), linear-gradient( transparent calc(100% - 1.45em), #A9CCE3 10px, #A9CCE3 10px, transparent 6px);
        background-size: 0% 4px, 100% 7px;
        background-position: 0 bottom, 0 bottom;
        transition: background-size 0.1s ease-in-out;
        background-repeat: no-repeat;
        padding-bottom:0px;
    }
    
    .entry-content p a:hover{
       color: base-2;
       background-size: 100% 6px;
       background-color: base-2;
    }
    
    .single .entry-content p a:link {
    color: base-2;
        text-shadow: 0 0 #6B5A5B, 0.06em 0 0 rgb(255 255 255 / 70%), 0 0.05em 0 rgb(255 255 255 / 70%), -0.06em 0 0 rgb(255 255 255 / 70%);
    }
    
    .entry-content ul a:link {
      background-color: base-2;
        color: base-2;
      background-image: linear-gradient( transparent calc(100% - 1.45em), #C8B1A0 10px, #C8B1A0 10px , transparent 6px), linear-gradient( transparent calc(100% - 1.45em), #A9CCE3 10px, #A9CCE3 10px, transparent 6px);
        background-size: 0% 4px, 100% 7px;
        background-position: 0 bottom, 0 bottom;
        transition: background-size 0.1s ease-in-out;
        background-repeat: no-repeat;
        padding-bottom:0px;
    }
    
    .entry-content ul a:hover{
       color: base-2;
       background-size: 100% 6px;
       background-color: base-2;
    }
    
    .single .entry-content ul a:link {
    color: base-2;
        text-shadow: 0 0 #6B5A5B, 0.06em 0 0 rgb(255 255 255 / 70%), 0 0.05em 0 rgb(255 255 255 / 70%), -0.06em 0 0 rgb(255 255 255 / 70%);
    }
    
    #2049480
    Elvin
    Staff
    Customer Support

    Hi Steph,

    You can add excluded-blocks on the section container’s Additional CSS class(es) field and then modify .entry-content part of your CSS selector to .entry-content *:not(.excluded-blocks)

    Example:

    from .entry-content ul a:hover to .entry-content *:not(.excluded-blocks) ul a:hover.

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

    #2049495
    Steph

    Thanks. Just gave it a try, but for some reason it does not work.

    Any ideas what could be causing the problem?

    *Edit* And yes… I did clear my cache ๐Ÿ˜‰

    #2049500
    Elvin
    Staff
    Customer Support

    Did you include the excluded-blocks class to the container block you wish to exclude?

    That is crucial in making things work.

    Can you keep it css class on the blocks and let me have a look?

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

    #2049505
    Steph

    I did.
    (Image attached in private information area so you can check if I somehow messed this part up without realizing it)

    The code is now:

    .entry-content *:not(.excluded-blocks) p a:link {
      background-color: base-2;
        color: base-2;
      background-image: linear-gradient( transparent calc(100% - 1.45em), #C8B1A0 10px, #C8B1A0 10px , transparent 6px), linear-gradient( transparent calc(100% - 1.45em), #A9CCE3 10px, #A9CCE3 10px, transparent 6px);
        background-size: 0% 4px, 100% 7px;
        background-position: 0 bottom, 0 bottom;
        transition: background-size 0.1s ease-in-out;
        background-repeat: no-repeat;
        padding-bottom:0px;
    }
    
    .entry-content *:not(.excluded-blocks) p a:hover{
       color: base-2;
       background-size: 100% 6px;
       background-color: base-2;
    }
    
    .entry-content *:not(.excluded-blocks) p a:link {
    color: base-2;
        text-shadow: 0 0 #6B5A5B, 0.06em 0 0 rgb(255 255 255 / 70%), 0 0.05em 0 rgb(255 255 255 / 70%), -0.06em 0 0 rgb(255 255 255 / 70%);
    }
    
    .entry-content *:not(.excluded-blocks) ul a:link {
      background-color: base-2;
        color: base-2;
      background-image: linear-gradient( transparent calc(100% - 1.45em), #C8B1A0 10px, #C8B1A0 10px , transparent 6px), linear-gradient( transparent calc(100% - 1.45em), #A9CCE3 10px, #A9CCE3 10px, transparent 6px);
        background-size: 0% 4px, 100% 7px;
        background-position: 0 bottom, 0 bottom;
        transition: background-size 0.1s ease-in-out;
        background-repeat: no-repeat;
        padding-bottom:0px;
    }
    
    .entry-content *:not(.excluded-blocks) ul a:hover{
       color: base-2;
       background-size: 100% 6px;
       background-color: base-2;
    }
    
    .entry-content *:not(.excluded-blocks) ul a:link {
    color: base-2;
        text-shadow: 0 0 #6B5A5B, 0.06em 0 0 rgb(255 255 255 / 70%), 0 0.05em 0 rgb(255 255 255 / 70%), -0.06em 0 0 rgb(255 255 255 / 70%);
    }
    
    
    #2049511
    Elvin
    Staff
    Customer Support

    I don’t see it being applied on the front-end.
    https://share.getcloudapp.com/rRuNpG8v

    Perhaps I’m looking at the wrong site or page. Is this for the home page of anomadspassport.com (not the staging site)?

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

    #2049515
    Steph

    That’s weird. It is the home page.

    Just noticed that is way also causes a whole bunch of issues with other blocks even if they have no additional CSS class.
    The issue vanished again the very second I removed the *:not(.excluded-blocks) part…
    It made the line under other links disappear

    See:https://www.anomadspassport.com/christmas-markets-in-europe/
    The external link under Berlin is underlined
    The external link under Cologne is not
    And I have no idea why…

    #2049524
    Elvin
    Staff
    Customer Support

    The Container block nesting should be fixed as well.

    The Headline Blocks “Featured Guide” and the Grid Block with 3 columns under it should be placed on the same Container Block.

    This should be done on “Bucket List” and the Grid Block w/ 3 columns under it as well.

    You then add the class on the Container blocks that holds both the headline and the grid blocks. ๐Ÿ˜€

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

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