Custom background colors on modal based on team member role?

Design help General
1

Hi! I’m a Webflow newbie.

I’m editing a team page for a client. The structure of the page was already built, and I’m updating the team cards as well as creating a new modal customized to populate each team member’s photo and bio. So far, so good.

However, the client would also like the background of the modal container (currently a clay color) to change based on the role assigned to them in the collection. (team, partner, advisor etc) Is this possible?

Also my z-index seems to be a little screwy with the modal. The page has an existing sliding header and component at the bottom of the page that always seems to be above the modal if you scroll while the modal is activated. Advice is appreciated!

Thanks in advance!

Alyssa

2

Welcome @agriego :wave:

Checkout this new feature, it may help: Use CMS data in custom attributes | Webflow Features

“Customize page styling based on a field value, using custom CSS. For example, different categories of your blog can look different by binding a Category field to an attribute, then using an attribute selector in your CSS like div[data-category]. #IYKYK”

3

Thank you! I’ll give it a try. -A