How can I change widget's CSS?

  • rduong
    Asked on November 25, 2016 at 2:40 PM

    Hi,

    I'm using this widget : https://widgets.jotform.com/widget/gift_registry

    but i want change label color...in white or an other color...can you help me and give me a CSS code please ?

    How can I change widgets CSS? Image 1 Screenshot 20

  • Özlem JotForm Developer
    Replied on November 25, 2016 at 3:42 PM

    Hi,

    You can change widget`s custom CSS according to your needs.

    I have cloned your form to my side and make some changes on it according to your request. Please follow the steps below and apply them to your form on your side.

    #1- You need to learn "class name" of fields in your widget. Please preview your form on your browser and inspect your form.

    As you can see in the following .checklist label is the class name that you need to use when you write your own CSS in your widget's Custom CSS section.

    How can I change widgets CSS? Image 1 Screenshot 50

    #2- Inject sustom CSS code below into your widget.

    .checklist label{  color:white;

                            font-weight:bold;

                           }

    Please have a look at the following image if you need more details about how to inject css into widgets:

    After you select your widget, click Wizard icon.

    How can I change widgets CSS? Image 2 Screenshot 61

     

    Click Custom CSS and write your CSS (paste) in the textbox. Finally, click Update Widget button.

     

    How can I change widgets CSS? Image 3 Screenshot 72

    The result will be like this:

    How can I change widgets CSS? Image 4 Screenshot 83

    If you need any further details please feel free to let us know.

    Thank you.