[Resolved] Fallback gradient for header elements

[Greg]

Hi guys

Not sure if this is possible with custom CSS, but would there be a way to set a fallback gradient for a header element? Just as I have a header background image with a gradient, so would be useful to replicate the gradient in the CSS when a featured image hasn’t been loaded – I know I can set the fallback image, but a gradient if possible would be ideal.

Thanks
Greg

[Tom]

Hi there,

It’s not possible in the settings at the moment.

You could use custom CSS, but it would have to be added before the CSS output by the Element itself, or it would overwrite the Element CSS and the settings wouldn’t work.

Let me know if you need more info 🙂

[Greg]

If you could give me an example of how to do that, that would be awesome.

Thanks
Greg

[Tom]

For sure, would this only be for one specific Element or would this apply to all Header elements?

[Greg]

Thanks Tom, one specific element if that’s possible.

is there a way to set it up with a custom element class or not, based on your previous reply?

Thanks
Greg

[Tom]

You could try something like this..

add_action( 'wp_enqueue_scripts', function() {
    $css = '.page-hero { background-image: linear...etc }';

    wp_add_inline_style( 'generate-style', $css );
}, 60 );

It’s not possible to use the custom class as the built-in CSS uses a simple .page-hero selector.

[Greg]

Perfect, that’s worked just as needed, thanks as ever!

[Tom]

Glad I could help! 🙂

[Greg]

Hi Tom,

I’ve only just realised but this isn’t working as I had hoped, it shows in the inspect CSS rules on the site, but if I remove the background image it doesn’t actually show the gradient – even though I can see the CSS for it there.

If I set the fallback CSS to !important; then it does show but overwrites the element styling/background image – any thoughts?

Thanks
Greg

[Tom]

Any chance I can check it out? Hard to tell without inspecting the page.

[Greg]

Hi Tom

Just realised what was causing the issue – I still had a background colour on the element header overwriting the snippet CSS, so removing that has fixed it.

I also figured out if I just change the class used in the snippet to a class I’ve added to the header, and then duplicate the snippet with the other gradients, I can get fallback gradients for all the header elements I’ve got 🙂

Thanks
Greg

[Tom]

Awesome, glad you got it sorted 🙂

[Author]

Posts