Using ACF Colour Picker To Override CSS

• dinot1985

• September 30, 2023 at 11:35 am

Hi

How can I use ACF’s colour picker field to override colours set by the CSS? I’m using Divi. There are multiple pages with the colour picker field, and the chosen colour should only override that page.

I tried a few different ways, including adding this to function.php

function enqueue_custom_js() {
    // Enqueue the JavaScript file from the child theme's directory
    wp_enqueue_script('branding-colors-js', get_stylesheet_directory_uri() . '/js/branding-colours.js', array('jquery'), '1.0', true);

    // Pass ACF field values to the JavaScript
    $acf_data = array(
        'primaryColour' => do_shortcode('[acf_views view-id="247125" name="Primary Colour"]'),
        'secondaryColour' => do_shortcode('[acf_views view-id="246841" name="Property Map"]')
    );
    wp_localize_script('branding-colors-js', 'acfData', $acf_data);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_js');

and this is the js

jQuery(document).ready(function ($) {
    // Function to replace colors
    function replaceColor(oldColor, newColor) {
        $("*").each(function (index, element) {
            var currentColor = $(element).css('color');
            if (currentColor === oldColor) {
                $(element).css('color', newColor);
            }
            var currentBgColor = $(element).css('background-color');
            if (currentBgColor === oldColor) {
                $(element).css('background-color', newColor);
            }
        });
    }

    // Check if ACF data is available
    if (typeof acfData !== 'undefined') {
        // Replace primary color
        if (acfData.primaryColour) {
            replaceColor('#0b5f6a', acfData.primaryColour);
        }

        // Replace secondary color
        if (acfData.secondaryColour) {
            replaceColor('#CBE4E8', acfData.secondaryColour);
        }
    }
});

I also tried not using ACF View shortcodes but nothing works.

function enqueue_custom_js() {
    // Enqueue the JavaScript file from the child theme's directory
    wp_enqueue_script('branding-colors-js', get_stylesheet_directory_uri() . '/js/branding-colours.js', array('jquery'), '1.0', true);

    // Pass ACF field values to the JavaScript
    $acf_data = array(
        'primaryColour' => get_field('primary_colour', get_the_ID()),
        'secondaryColour' => get_field('secondary_colour', get_the_ID())
    );
    wp_localize_script('branding-colors-js', 'acfData', $acf_data);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_js');

The ACF field name’s are primary_colour and secondary_colour

Edit-Field-G....png

• John Huebner

• October 1, 2023 at 9:53 am

You are attempting to look at all elements and find those with the color set in each elements css. It is very unlikely that each element has a css color set. More then likely the CSS is set with a class, or set on some specific element of the page and each elements color is inherited.

You have to override the color of the element using the same CSS selector that is setting the color you want to override.