Archived topic
Apply CSS to pages with GPP hero element active?
5 replies · Started by Nik on May 18, 2022
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
Hi there,
can i see the site ? Will assist with my understanding and the best course of action.
Thanks David, dropping the details below.
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 ?
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!
Glad to be of help
