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

  • Profile Image
    accessopportunity
    Asked on June 25, 2020 at 06:43 PM
  • Profile Image
    Jovanne_A
    Answered on June 25, 2020 at 07:03 PM

    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?

    159312616810.png

    We look forward to your response. Thank you.

  • Profile Image
    accessopportunity
    Answered on June 25, 2020 at 08:20 PM

    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. 

  • Profile Image
    Jovanne_A
    Answered on June 25, 2020 at 08:24 PM

    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.

  • Profile Image
    Jovanne_A
    Answered on June 25, 2020 at 08:24 PM

    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.

  • Profile Image
    Jovanne_A
    Answered on June 25, 2020 at 09:06 PM

    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;}


    159313354512.png



    Let us know if this works for you.

  • Profile Image
    accessopportunity
    Answered on June 25, 2020 at 09:17 PM

    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.

  • Profile Image
    Jovanne_A
    Answered on June 25, 2020 at 09:25 PM

    Hi,

    Please insert this custom CSS code:

    button.remove, button.add {

    border: none;

    }

    Let us know if this works for you.

  • Profile Image
    accessopportunity
    Answered on June 25, 2020 at 09:54 PM

    Yes thank you!