Hi again, my client is wanting the site header to be five different colours depending on the page content. I don’t think I can simply apply different classes, and believe there has to be some javascript (var?) in the page header to handle?
Please can someone point me in the right direction as I am not yet up to speed with scripting.
Thanks
You most likely don’t need any scripting and just need CSS.
I assume you want to change all the headings eg h1,h2… to the same colour per page??
Giving the scenario will help with the easiest solution.
But one way is to make use of the body class option.
Add a class to the body in page settings then use that.
Eg. If you added .heading-blue to the body you could add this to the class manager.
.headings-blue h1,h2,h3,h4
Applying individual classes on each element is just needlessly time consuming. Let the CSS work for you.
1 Like
I thought I would do a quick test here, because you never know with Blocs. 
And yep, Blocs doesn’t display it completely correctly on the design canvas for some weird reason it doesn’t change the colour on the h1. It does correctly colour the text in preview though.
Maybe @Norm can take a look at that. It ignored the first tag in the selectors on the design canvas. eg. If you remove the h1, it will ignore the h2. 
1 Like
Pete, thanks, but also my apologies, by site header I meant the background colour of the header, not h1, h2 etc.
Sorry my mistake, I had in my mind headings.
Same approach applies though @RobertF
Thanks Pete. So if I’ve understood correctly I create a body class for each header background colour, e.g.
.header-blue
.header-red
.header-green
etc?
And then I apply it at bloc level?
Yes. So add a common class to the header.
Eg. .my-header
Then use the body class to customise it.
Eg. .header-blue
So the class editor would have
.header-blue .my-header
Make sure to preserve the space between those classes.
But really if you are going to all this trouble with a single bloc or element. Just add a class directly to it. It’s only one class then.
My earlier approach was considering multiple elements, where adding only one class to the page would change all of them.
The approach using the body class is handy if you wanted to see a different primary or accent colour on a page also, without having to add a bunch of classes etc.
It really comes down to making life simple with how you create your design elements.
1 Like
Thanks very much, got it now.
Sorry, I thought I’d understood but the colour set in body class page settings fills the whole page not just the bloc with the common class.
To make the steps I’ve followed clear here is a short video:
Don’t add any styling to the class you put on the body.
We just use that to apply the other class.
But as I mentioned above if it’s just a single header bloc you are changing. Just add a class directly to it with the colour you want.
1 Like
Thanks, it’s working now. I just needed to apply the empty body class at project level not page.
Pete, sorry to bother you again but this still isn’t working.
I created an empty class as you suggested and added it to the body class in the project settings.
I then created three classes for each colour: header_colour1, header_colour2, header_colour3.
The header background colour displays fine after applying the desired class colour to the bloc but then when I go to another page that needs to be a different colour, after applying another colour class the header on every other page is also updated.
I’ve been trying to resolve this myself - I think it must be something wrong with how I am applying the colour class - but can’t work out what I’ve done wrong.
It would be easier to just as a class to the header in this situation.
But happy to help if you want to understand how the other way works. It’s very useful if you are duplicating pages and want variations.
Thanks. To confirm, this is definitely about variants. The goal is to apply a different background colour to the header section of a page depending upon the sort content the page displays.
I’d originally tried applying a separate class for each background colour to each header section but quickly realised that was simply going to update globally.
Oh the header is a global?
In that case yeah the body class is the way to go.
Send me an email if you like.
1 Like
Will do, but got to sign off for today now… thanks.
1 Like
Just want to say thanks for looking into and sorting. Blocs is a great app for me - I can normally get work done most of the time without any problem, and when I can’t it is almost always down to my knowledge rather than a limitation of the application.
1 Like