[Resolved] Apply CSS to pages with GPP hero element active?

[Nik]

Hi there,

I’ve got some pages with a merged header, made in the usual way from the documentation. I want to apply a background gradient rather than a single colour so I don’t think I can do it in the Element editor.

Is there a way to apply a CSS rule to pages that use this Element? I can’t see a class added that I could piggyback on. I’m trying to avoid having to duplicate the display rules from the element with a list of page-ids in the CSS.

FWIW, I’m applying the gradient to the .site-header class at the moment.

Thanks!

Nik

[David]

Hi there,

can i see the site ? Will assist with my understanding and the best course of action.

[Nik]

Thanks David, dropping the details below.

[David]

Ok – so if its for a merged header element then you have the header-wrap container that gets wrapped around the site-header

So you can do either do:

.header-wrap .site-header {
    /* your styles here *.
}

or you could just style the header-wrap

Does that work for what you need ?

[Nik]

Amazing! Works perfectly for my needs. I was looking at the pages with/without that element side by side, thinking there must be a container/class somewhere that would differentiate them, but couldn’t find it. Thank you!

[David]

Glad to be of help

[Author]

Posts