Browser: Chrome 110 OS: macOS / Windows / Linux / etc. URL: Link to a page that illustrates this issue Video: Short screen recording that illustrates this issue (free tool: jam.dev)
It appears that the dynamic color (via ACF color picker) does not apply to the icon element. Manually adding color works just fine. When using dynamic, looking at markup reflects the element does not receive the color or fill properties. Manually adding the color, it works so those properties appear.
Hopefully images are clear enough to express the problem.
Can you please show how you set up the ACF fields?
My assumption: You’re using a repeater for the list items, but the ACF color is outside the repeater, right? If so, you can’t get the color field value inside the repeater.
There are two ways to work around:
Add the acf color to the whole list (Typography » color), and change the text color accordingly.
Use the ACF get_field function to retrieve the value. Make sure to add the get_field function to the allowed function names and add this to the raw color field of your icon: {echo:get_field(‘acf_color’)} (change the field name accordingly).
Since you had brought it up and it’s related to this issue, on #2, I’ve been banging my head trying to get it to work, and nothing happens. Could you clarify what I might be doing wrong? I looked at your links and all that with the documentation. I added the filter in functions file, I added the ACF function (get_field) to the return in the functions file, and I added the {echo:xxxx} (note, I’ve tried get_sub_field and get_field) to the RAW field of the color. Nothing is happening. No background-color property is being rendered at any point. Here are two images show the implementation:
Is there any “style” set on the button? If so, set it to none.
Also, you can add the echo dynamic data tag to a basic text element to test if there’s any output.
Hey, sorry for the delay in response. I tested a basic text element on the same loop level of the button and it took the color applied by {echo:get_field(‘acf_modules_hero_module_hero_secondary_color’)} in the RAW field. I also verified the style on the button is set to none. Interestingly, I have the dynamic RAW output applied to typography color of the grandparent wrapper (named buttons in picture) to all these elements, and when I added an ICON element, it automatically inherited the selected color dynamically set in RAW of the grandparent’s typography color. Perhaps there is something funky going on with the button element after all?
Here’s an image. What’s being shown is the text and icon are inheriting the green, and the button text is black and unstyled, despite the RAW being applied directly to it (background or text color, neither is working).
