I would like to revise my Configurable List widget to match the style of the rest of my form.

Hi, thank you for reaching out to us.

Is this the field you're referring to? If yes, can you please provide us further details about how do you like the Configuration list to be styled?



We look forward to your response. Thank you.

Yes, that is the field. If possible, I would like the font to be Brandon Grotesque like the rest of my form. I would also like the dropdown style to look like the rest of my dropdown fields.

If it is possible for the button style to be the same as my back and next button, that would be great too. 

Hi, thank you for your response.

Please allow me some time to conduct some tests and work for a solution.

Thank you for your patience.

Hi, thank you for your response.

Please allow me some time to conduct some tests and work for a solution.

Thank you for your patience.

Hi, thank you for your patience.

Please try to insert this custom CSS code to the widget's custom CSS field:

@font-face {

    font-family : "brandon-grotesque";

     src : url("https://use.typekit.net/af/1da05b/0000000000000000000132df/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/1da05b/0000000000000000000132df/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/1da05b/0000000000000000000132df/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");

  }

table#list tr td input[type="text"] {

    padding: 5px;

    font-size: 1em;

    line-height: 1.071em;

    border-radius: 6px;

    width: 149px;

    font-family: 'brandon-grotesque', 'Quattrocento Sans', sans-serif !important;

}

td.col2 select {

    padding: 4px !important;

    width: 150px !important;

    font-family: 'brandon-grotesque', 'Quattrocento Sans', sans-serif !important;

    border-radius: 6px;

}

button.remove, button.add {

    box-shadow: none;

    text-shadow: none;

    color: #fff!important;

    background: #f27e5d;

    padding: 5px 15px!important;

    font-family: 'brandon-grotesque', 'Quattrocento Sans', sans-serif !important;}






Let us know if this works for you.

This has worked almost perfectly!

The only change I would like to make is to remove the border around the + and Remove buttons, if possible. There seems to be a small gray outline around them.

Hi,

Please insert this custom CSS code:

button.remove, button.add {

border: none;

}

Let us know if this works for you.

Yes thank you!