Topic: Dynamic Background Color in Element

David
September 17, 2023 at 6:18 am
I reviewed this post – https://generate.support/topic/change-background-colour-on-specific-pages/#post-44640

There’s a problem with the code in the hook element. You need to target style – not stlye.

I tried this code (from the referenced post) in a wp_head hook, targeted to a specific page – and the element is not hooking. (Creds in priv info below)
```
<style class="form-style">

body, body .site-content {
    background-color: var(--bg-lite);
}

body .gb-container.gb-container-c929cb1f .gb-shape.gb-shape-1 {
    color: var(--text);
}

</style>
```
What I’d like to do is create an element that can target with location rules selected CSS properties on a post.
Ideally, the solution, in the case of background color, would have the CSS value as the CSS variable linked to the GP color palette. To further generalize the solution, I’d like to retrieve the CSS value from an ACF element specifying the color string (i.e., var(–bg-lite))

How could this be accomplished?

Thanks,
David
David
September 17, 2023 at 7:55 am
Hi there,

you would begin by creating some global colors in the Customizer > Colors
Name them what you require but for this example I will use:

primary-bg & secondary-bg

GP will output those variables and their values in the :root CSS ie.
```
:root {
    --primary-bg: #ff0000;
    --secondary-bg: #00ff00;
}
```
Apply those colors to the relevant block settings you require.

Then hook into the wp_head your ACF variables and using their values to the same CSS Variables but this time in the body tag using this PHP Snippet:
```
add_action('wp_head', function(){
    $primary_color = get_field('my-custom-field-1') ?: '#ff0000';
    $secondary_color = get_field('my-custom-field-2') ?: '#00ff00';

    echo '<style>body {--primary-bg:' . $primary_color  . '; --secondary-bg: ' . $secondary_color . ';}</style>';
});
```
Note after: $primary_color = get_field('my-custom-field-1') ?: '#ff0000'; is the fallback hex color if the ACF field is empty
David
September 17, 2023 at 9:32 am

Hey David – Just totally AWESOME!!! Thank you so much for this. I am going to ask one bit of clarification. When I create the wp_head hook element, I use the PHP snippet and then control the location using the element display rules – correct?

Thanks for providing the info on the fallback also – nice safeguard. 🙂

Where can I find a “listing” of other “items (i.e., $primary_color)” for the wp_head?. If I have those, I can figure out how to handle a lot of stuff very nicely in GP Elements – this is soooooo powerful.

And can you also share how I can find out what other GP CSS variables are established – like typography settings, font colors etc…. I couldn’t find a listing in the GP docs. If you’d let me know where to look that would be really helpful.
David
September 18, 2023 at 3:08 am
The code above is a PHP Snippet, and it would go in your Child Theme functions.php or via a Code Snippets plugin. The code itself is autonomous.

It:

a) declares a variable eg. $primary_color – this can be whatever you want to name it.
b) it loads that variable with a value from the get_field('my-custom-field-1')
c) if ?: no value exists it loads the variable with the fallback eg. ‘#ff0000’;
d) it echos an inline style that includes the variables as the CSS property values into the wp_head

If you wanted to add it to a GP Element, you could add it like so:
```
<?php
$primary_color = get_field('my-custom-field-1') ?: '#ff0000';
$secondary_color = get_field('my-custom-field-2') ?: '#00ff00';

echo '<style>body {--primary-bg:' . $primary_color  . '; --secondary-bg: ' . $secondary_color . ';}</style>';
});
?>
```
To re-iterate, the $primary_color is a variable that you name. GP doesn’t preset variables like that for you to use.

CSS Variables, aside from the off canvas width, the only CSS variables the theme currently uses are those YOU set in the Customizer > Colors.
David
September 18, 2023 at 12:27 pm

David –
Thanks for the additional explanation – very helpful. I have a coding background, so the explanation cleared up some misunderstanding I had about this snippet. I now understand the inline style injection much better and feel pretty confident in doing some tinkering around with additional CSS selectors that were used in the very first code snippet.

And from a separate topic I started, I learned a valuable lesson on hooking elements especially when the front page is involved.

Y’all do fantastic work and I really appreciate your efforts.
David
David
September 18, 2023 at 10:36 pm

Glad to be of help!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Dynamic Background Color in Element