Element color background in repeater with ACF

Marko Krstić
16 Jul 2022

Create ACF field group and assign it to posts.

Create field label and name it color and choose field type Color picker.

Assign color to each post

Create a repeater in Oxygen builder

Select first child of Repeater

  1. Add class to that element “data-color-bg”
  2. Go to advanced > attributes > Add attribute. First field needs to be “data-color” and second one use data > Advanced Custom Field > Color

Add code block bellow repeater or for better experience use Scripts Organizer.

Paste JavaScript into JavaScript Tab


(function($){

    $(function() {

		$(".data-color-bg").css('background', function () {
			return $(this).data('color')
		});

		
    });

})(jQuery);

Final result

Was this article helpful?

Tags

Categories

Never miss new post again

Subscribe and get list of new posts in your inbox

Click to Copy