Dynamic Inline Styles from ACF Fields for Repeater Divs in Oxygen

Updated on June 05, 2021

This members-only tutorial provides the steps to set the value of a background_color Color Picker type of field created using ACF for each post output by Oxygen‘s Repeater component as the value of background-color property inline.

Step 1

Create a ACF field group having a Color Picker type of field for the post type of interest.

Step 2

Edit the entries of your post type and populate the background color field.

Step 3

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: [Function] Get Background Color

Code:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

Posted

Nov 27, 2020

Oxygen, Plugins, Premium

Sridhar Katakam

Tags:

ACF, Data Attributes

Comments

9 responses to “Dynamic Inline Styles from ACF Fields for Repeater Divs in Oxygen”

squeak.media

Apr 12, 2021

Is there any way you can provide a snippet for the color picker sub_field that is in an ACF repeater?

Reply
1. Sridhar Katakam
  
  Apr 26, 2021
  
  If the Background Color field is inside a Repeater i.e., as a subfield, it can have multiple values per post.
  
  https://d.pr/i/DhkNBr
  
  Which value should be taken and applied as the post’s background color? The first one?
  
  Reply
[email protected]

Jun 3, 2021

Hi Sridhar,

This worked great as used for a dynamic background color for the client to change for their sponsors CTA buttons. But I tried the same process for changing the text color of the button by creating a new snippet, applying the attribute to the button (which now had 2 style attributes which I think is the problem) and it overrode the background and was now only dynamically changing the text and the button color was back to default. Any chance you can pick out what I’m doing wrong? Thank you sir!

Reply
1. Sridhar Katakam
  
  Jun 3, 2021
  
  Do you want to set up both the dynamic properties i.e., Repeater Div background-color and button text or just the button text?
  
  Reply
  1. [email protected]
    
    Jun 4, 2021
    
    It’s actually button background color and button text. I’m going to PM you on FB with a link to the dev site. I got the button background color to pull through from an ACF color picker but not the button text color.
    
    Reply
    1. Sridhar Katakam
      
      Jun 5, 2021
      
      I updated the tutorial. Check the update near the end.
      
      Reply
      1. [email protected]
        
        Jun 5, 2021
        
        Thank you sir!!! You’re the best!!!
Stephane Vaillancourt

Mar 5, 2022

I’m new here and thank you for this great site! Looking forward to…saving time!

I have followed all the steps but I think my goal is a little different.

1. I have a ACF custom field called “vulnerability_status” displaying the vulnerability status.

Choices:

New
Open
In Progress
In Review
Under Review
Cancelled
Reopened
Done
Closed
Resolved
Completed

2. I created a modal that is triggered by selecting the vulnerability status word so users can select another status from the list.

3. How can I change the DIV background based on user selection?

Example: vulnerability_status = “New” -> then I want the DIV background to be green. Same for vulnerability_status = “Closed” -> then I want the DIV background to be black.

Is it possible?
Thanks in advance

Reply
1. Sridhar Katakam
  
  Mar 5, 2022
  
  Thanks for becoming a member Stephane.
  
  Mind sharing the URL of the page that you have currently or perhaps a Loom screencast elaborating more?
  
  Trying to properly understand the requirements.
  
  Reply