Bind CSS to Dynamic Data Fields

How To
1

Hey folks,

I tried to find it, but no luck.

Does anyone know how to bind a CSS class to a dynamic data field? I am wanting to be able to apply specific CSS styles to specific fields.

Cheers

2

Hi shingen,
welcome to the forum!

Every dynamic data field has a data-field-id. Inspect the frontend with developer tools to get the ID of the specific field.

image

You can target this field with something like:

.dynamic[data-field-id="687bb0"] {
  color: red;
}

Best regards,
timmse

3 Likes
3

Hey Timmse,

Aww, perfect – thank you for that and the quick reply! =)

1 Like
4

I had the same question, but wanted to add a background colour (via css) to a specific ACF field in a custom post inside a Query Loop. In other words, the posts are sessions in a conference timetable and some of the sessions’ titles needed to be marked as ‘plenary’. The data-field-ids in this case are 0-10, and repeated on different days, so that wasn’t going to work.

To begin with I thought it would work to have a true/false plenary ACF and then apply an “if” php snippet into the class of the basic text element. That didn’t work - the php wasn’t being read as php…

What did work was to change the ACF field to a simple text field and add the word ‘plenary’ to the session where needed. The I was able to simply add {acf_plenary_field} to the element’s class field. Which add the correct class of plenary to the front end.