Changing color (of text, background etc) based on whether switch is turned on in CMS

Design help CMS
1

Hi all,

Is is possible in webflow to change the color of a text element or the background of div in a collection list based simply on whether a switch is on or off?

With a div background, this can be hacked by absolutely positioning the a div with the desired color on top of the parent div and setting its visibility conditional to whether the switch is on, but is there an easier way (without the color field in CMS having to be manually set)?

And is it possible at all with text color? I’m wracking my brain to no avail.

Thanks

2

Hi @moonworks,

This probably/most likely could be done, but it would all be custom code.

The process you described is probably the easiest and less complicated way of doing it.

Wish I had better news for you.

Happy Designing,
Brandon

1 Like
3

Hi @moonworks,

Was your project successful? Do you have any experience to share on how to do it in Webflow-only without using custom code?

4

Hopefully this has been solved - but here’s my Webflow-only solution:

  1. Create a Div containing the text blocks you’re trying to invert (named mine “Light Text Div”)
  2. Duplicate the “Light Text Div”
  3. (on 2nd Div) Delete the class, and add a new class called “Dark Text Div”
  4. In the CMS Panel, add a ‘Switch’ in your collection settings named “Invert Color”
  5. Turn it on for the CMS items that require it (inside CMS panel)
  6. Go back to the “Light Text Div” and set Conditional Visibility to: Element is Visible when > “Invert Color” is off/on
  7. Same thing for “Dark Text Div”, just opposite setting (on/off)

Should be good to go! Happy webflowing :smiley:

1 Like