Fallback gradient for header elements

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

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

Thanks
Greg

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

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

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.

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

Glad I could help! :)

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

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

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

Awesome, glad you got it sorted :)