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

[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%);
}

[Elvin]

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.

[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 😉

[Elvin]

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?

[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%);
}

[Elvin]

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)?

[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…

[Elvin]

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. 😀

[Author]

Posts