How to change the styling for the +Add button on the Configurable List Widget? Font, font color, background color, hover & press colors, etc.

  • Russell Cooney
    Asked on May 9, 2024 at 5:07 PM

    How to change the styling for the +Add button on the Configurable List Widget?

    Font, font color, background color, hover & press colors, etc.

    Page URL: https://www.jotform.com/help/282-how-to-set-up-the-configurable-list-widget/
  • Filip JotForm Support
    Replied on May 9, 2024 at 5:39 PM

    Hello Russell,

    Thank you for contacting Jorform Support. To customize the styling for the "+Add" button on the Configurable List Widget, you can use CSS (Cascading Style Sheets). Here's an example code snippet to get you started:

    /* Change font style and color */

    .configurableList-addRow {

       font-family: Arial, sans-serif;

       color: #ffffff; /* Font color */

    }


    /* Change background color */

    .configurableList-addRow button {

       background-color: #007bff; /* Background color */

    }


    /* Change hover color */

    .configurableList-addRow button:hover {

       background-color: #0056b3; /* Hover color */

    }


    /* Change press color */

    .configurableList-addRow button:active {

       background-color: #003d6f; /* Press color */

    }

    You can add this CSS code to your form by following these steps:

    1. Open your Form in the Form Builder: Navigate to the form where you've added the Configurable List Widget.
    2. Access the Widget Settings: Click on the Configurable List Widget to access its settings.
    3. Customize the Widget: Look for an option to add custom CSS or inject custom CSS into your form. This is where you'll paste the CSS code provided above.

    Adjust the font family, colors, and other styles in the CSS code as per your design preferences. You can use online color pickers to find the exact color codes you want to use.

 
Your Answer