How to style Configurable List widget to match design of a form

  • resilienceschool
    Asked on March 11, 2016 at 3:41 PM

    Can you please help me make the design and look of the configurable lists match the rest of this form?  I don't know what CSS to enter.

  • Boris
    Replied on March 11, 2016 at 4:04 PM

    By matching the design, I believe you are referring to the colors used on the form, is this correct?

    The rest of your form is using a brown color #7A6A53, so all we need to do is add it to the custom CSS of each of your Configurable List widgets:

    th { color: #7A6A53; }

    You can apply custom CSS to the widget by clicking on its wand-shaped icon, switching to the CSS tab, and pasting it there:

    How to style Configurable List widget to match design of a form Image 1 Screenshot 30

    The result will be appearing like this:

    How to style Configurable List widget to match design of a form Image 2 Screenshot 41

    If you want to apply the same color to the labels of Radio Button options as well, please use this CSS instead:

    th, label { color: #7A6A53; }

    Please let us know if you need any further assistance, we are here to help.