Support

Account

Home Forums Feedback Send ACF value to CSS var

Solving

Send ACF value to CSS var

  • 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>
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.