Jump to content

Dynamic Branding Using Parent CSS and JS


Recommended Posts

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

cbformfieldcell.jpg

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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...

 

remove padding.jpg

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...