Hi! I’m trying to set a custom background of every project in the web by selecting 3 colors, with 3 ACF color pickers, and then those values to set 3 different css vars (–color-1, –color-2 & –color-3), so the page template can set the background to background: linear-gradient(180deg, var(--color-1), var(--color-2), var(--color-3))!important;
I’m only getting wrong codes and the fields are not reaching the css vars…
I guess there’s a simple way to do it, but cannot make it.
Can you help me? Thank you
You need to add the custom properties on your template, e.g. header.php.
<style>
:root {
--color-1: <?php the_field( 'color_1' ); ?>
--color-2: <?php the_field( 'color_2' ); ?>
--color-3: <?php the_field( 'color_3' ); ?>
}
</style>
You are going to have to provide more information.
What code are you using to generate your CSS file?
How is the CSS included on the page?
If you’re including your ACF color picker on an Options Page, you’ll need to say that in your php when you get the field. Also don’t forget your CSS semicolons:
<style>
:root {
--color-1: <?php the_field( 'color_1', 'option' ); ?>;
--color-2: <?php the_field( 'color_2', 'option' ); ?>;
--color-3: <?php the_field( 'color_3', 'option' ); ?>;
}
</style>