[Resolved] Changing background of Page Hero Title field with colour in custom field

[Martin]

My client is asking me if she can change the colour of the title background in the page hero on a specific page. I think because I have allowed her a banner image field which is put in the page hero.

Can you suggest to me how I might do this please?

My staging site is at https://icasc.ca/staging – you can see the page hero banner images behind the nav and header and my page titles. Looks great, just was trying to give her some easy way to change the colour (default now I set in the element as white text and black background). I was thinking if I defined some custom fields as text colour and text background, maybe those could be passed to the element? Not sure if that is possible?

[Leo]

Hi there,

Instead of using inline HTML style like:

<span style="background-color:black;color:white;padding:10px;">
International Centre of Art for Social Change </span>

Try using a class in h2 instead:
<h2 class="title-background">International Centre of Art for Social Change</h2>

Then target it with CSS:

h2.title-background {
    background-color: #000;
    color: #fff;
    padding: 10px;
}

Then you can target a specific page like:

body.page-id-xxx h2.title-background {
    background-color: #333;
    color: #000;
}

Something like this might be worth a read:
https://mangomattermedia.com/wordpress/wp-quick-tip-target-a-specific-page-with-css/

[Martin]

Interesting. Can the user edit the target specific page with css on the edit page she is on then? I don’t see a place on the wordpress edit page to put css for that page?

[Leo]

The CSS would go in the global editor.

If you are using Simple CSS, then there is a CSS metabox you can use which would be page specific:
https://docs.generatepress.com/article/adding-css/#simple-css

[Martin]

Just installed Simple CSS but don’t see the page specific meta box on the edit page?

[Leo]

Should definitely be there:
https://www.screencast.com/t/AqZTYnio

[Martin]

My bad – sorry I was looking in the sidebar. Wow this is amazing! I love you Leo!

Do I still need the page-id to target the page or does it know it is only for the current page if it is in the page meta box?

I’m wondering if default / placeholder css can be entered in the meta box somehow so the user will make minimum mistakes when she changes it?

[Leo]

No need to target the page ID if it’s using the metabox of that page.

Keep in mind that metaboxes don’t work on index pages like blog/archive.

[Martin]

ok, what about putting default css in?

body h2.title-background {
    background-color: #333;
    color: #000;
}

This is just going to target the page hero and not the whole page?

I guess this would do the trick? But I can’t pre-populate it though right?

[Leo]

That just goes in the global editor.

It would target the class title-background which is in the HTML here:
https://generatepress.com/forums/topic/changing-background-of-page-hero-title-field-with-colour-in-custom-field/#post-1179257

Might be beneficial to learn HTML div and classes?
https://www.w3schools.com/html/html_classes.asp

[Martin]

Sorry yes I always need to learn more. I understand the class target. I was just trying to think of a way so my user doesn’t actually have to type or paste the Css in the meta box. I was hoping there was a way to have the css there already and then it could be edited. Sort of like how a field can have an initial value…

[Leo]

Couldn’t you just have the same CSS in the global editor and metabox?

Then the user would just need to change the hex color code when needed.

[Martin]

By global editor you mean in the dashboard? I guess that is where the user will have to go to grab the css. Then paste it into the page and change the colour for page specific. I get that. I was just wondering if we could save them a step by having that css snippet right there in the page edit.

There isn’t a comment / description area somewhere we could place it is there? then they could copy it from there and paste it into the meta box.

[Leo]

The global editor means the global Simple CSS editor in Appearance > Simple CSS.

It’s really up to you and your client to find the easiest way.

Perhaps you could provide the CSS in an e-mail and they can copy and paste it when needed?

Otherwise I don’t think it’s very hard to copy the CSS from the global editor and paste in the page metabox if you can provide some screenshot or clips on how to do it.

[Martin]

Your right of course. I don’t think it’s hard. Don’t know why I always reach for the sky. Thanks so much for your fast response Leo. It has been a pleasure!

[Author]

Posts