Quantity Gift Registry: Change font color of items in the list

  • clarkschool
    Asked on April 15, 2016 at 11:36 AM

    Hello,

    I've tried to inject CSS to change the font of the items in the Quantity Gift Registry widget ("Please place your order (cash/check)"), but I guess I'm not using the correct code to make it match all the other font on the form. Can you please help?

    Thank you!

  • David JotForm Support
    Replied on April 15, 2016 at 1:46 PM

    I checked your form and it looks like several changes have been made to the quantity gift registry widget.  If you wouldn't mind letting us know what else specifically needs to be changed, we will be happy to help.

  • clarkschool
    Replied on April 15, 2016 at 2:24 PM

    Quantity Gift Registry: Change font color of items in the list Image 1 Screenshot 20

    Hi there, there's an arrow pointing to the font that I'm having trouble with. I want it to be the same color as the font on the rest of the form, and I need the correct CSS because it is a widget. Can you please provide me the correct CSS? Though it was called "checklist label", but should I call it something else? Thank you!

  • David JotForm Support
    Replied on April 15, 2016 at 3:55 PM

    Adding this code to your form will change the font color for the inventory widgets labels:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .form-product-name{
    color : blue;
    }

    Add the code to the form itself, not to the widgets CSS section.  Change the color and add whatever other styling those labels require.

  • clarkschool
    Replied on April 19, 2016 at 9:51 AM

    Thank you.

    I added

    .form-product-name{
    color : black;
    }

    to my form (not the widget), but it didn't seem to do anything. I even tried using a hex color code instead, but that didn't do anything either. Would you please take another look and let me know what you think?

  • Carina
    Replied on April 19, 2016 at 10:17 AM

    Please try adding the following css code to the widget's custom css:

    .checklist label {

       color: #ffffff !important;

    }

    Quantity Gift Registry: Change font color of items in the list Image 1 Screenshot 20

    You can test and clone the demo form:  

    https://form.jotform.com/61094305183956 

    Let us know if we can assist you further.   

  • clarkschool
    Replied on April 19, 2016 at 10:40 AM

    Using #ffffff changes the font to white, so I used #000000 to make it black, but it still looks gray-blue on the designer preview. I even removed the code that I added to the form itself (that David provided above), thinking that the two things were conflicting, to no avail.

    I'm going to have to go live with this form today, and this isn't a deal-breaker, but it would be nice if the font was uniform. If you can think of anything else, please let me know.

    Thanks--I really appreciate your help!

  • Carina
    Replied on April 19, 2016 at 10:50 AM

    Please try cloning the demo form:

    https://form.jotform.com/61094305183956 

    I have changed the color to black and added font-weight bold, which you can remove if you think it's too much:

    Quantity Gift Registry: Change font color of items in the list Image 1 Screenshot 20

    Let us know if it is different than the desired result.

  • clarkschool
    Replied on April 19, 2016 at 11:34 AM

    YES! That's it! Thank you!!! Very helpful!