How to dynamically set the background colour of a text layer/div in Slider Revolution from Advanced Custom Field Colour Picker?

Question

OUTLINE: I want to dynamically set the background colour of a text layer/div in Slider Revolution based on the colour a user pics on the post

I have a div using Text Layer in Slider Revolution (SR). The slider shows posts from "Events" - a Custom Post Type.

The background of this div needs to change according to the background colour in ACF field by user (event_background_color) set in the Custom Post Type.

In SR I have the text layer content with this code:

<div class="primary-background"></div>

and in WordPress Customise – Additional CSS I have:

.primary-background {
    background-color: <?php the_field('event_main_color'); ?>;
}

However, the obvious issue with the above is that php is not parsed by css.

I have also tried;

<div style="background-color:{{meta:event_main_color}};" class="primary-background"></div>

But to no avail.

If someone could point me in the right direction it would be very much appreciated!

Answer 1

Edit

Have you tried adding this inside a style tag in the html maybe in the header.php file?

<style>
    .primary-background {
        background-color: <?php the_field('event_main_color'); ?>;
    }
</style>