Dynamic Branding Using Parent CSS and JS

[DaveS]

Hi, 

I'm embedding Caspio in Webflow.  I'm trying to dynamically brand/color the pages, and am well on my way... but I've got a few issues:

1.)  I have an update form with some fields display only and some that are enterable.  I'd like to have the display only ones have a different background color.  This happens by default, but my background is dark, so it's difficult to see the black text on the dark background...  I was hoping to put non-enterable fields in cream or gray boxes, with enterable fields in white. That seemed to work automatically based on style for "display only" fields, but not for Virtual Fields that have a calculated value.  

I tried to use style to set the cbFormFieldCell and cbFormDataCell background color, but that leaves me with a weird "white box inside a cream box" look (red highlight added by me to emphasize).  

----

Bigger picture question:  I'm trying to use js in Webflow to set colors for some things like buttons dynamically, but nothing I do seems to be able to override Caspio's style - even if that style doesn't contain any color.  

Appreciate any suggestions,

 

Dave

[DaveS]

Oh - for further clarity - the Service Box above is a Virtual Field with Calculated Value.  The Email is a "display only" field.  Initially, the service was black text on the dark green background.  So, I went into Style and changed the cbFormFieldCell / cbFormFieldData properties to be the cream color... But now my entry fields are white boxes inside a cream colored box.  

Ideally the enterable boxes would just be all white.  

Thanks!

[DaveS]

Ok - getting closer.  Figured out that I needed to remove the padding and set the style of the input field...  Latest updates - I still have a field that's half cream, half white...  It seems the challenge is that the class of row "Service" and row "Prefix" are both cbFormFieldCell, so I can't seem to change one without changing both...