[Resolved] How to remove translucent red effect from WP Show Posts header Element

[WebDevForge]

Hi, I’m creating a website for a local art magazine and most of their images are black and white handmade cartoon, so, when I use the WP Show Posts header element from the Dispatch theme, a red translucent filter is being automatically applied to the images on the header.
Could you please help me removing it by replacing the CSS property that does this? I’ve already tried using the Google Chome Developer Tools to inspect and overwrite the properties but no success so far.
Thanks in advance!

[David]

Hi there,

the site uses CSS found in the Customizer > Additional CSS. Look for this block of code:

.wpsp-card .wpsp-content-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5% 8%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.35);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

And delete these three CSS properties:

background-color: rgba(0, 0, 0, 0.35);
background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%);

[WebDevForge]

Perfect!
It was right under my nose! LOL
Thank you very much! 🙂

[David]

You’re welcome

[Author]

Posts