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?
