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

  • Profile Image
    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!

  • Profile Image
    david
    Answered on April 15, 2016 at 01: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.

  • Profile Image
    clarkschool
    Answered on April 15, 2016 at 02:24 PM

    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!

  • Profile Image
    david
    Answered on April 15, 2016 at 03: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.

  • Profile Image
    clarkschool
    Answered on April 19, 2016 at 09: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?

  • Profile Image
    Carina
    Answered 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;

    }

    You can test and clone the demo form:  

    https://form.jotform.com/61094305183956 

    Let us know if we can assist you further.   

  • Profile Image
    clarkschool
    Answered 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!

  • Profile Image
    Carina
    Answered 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:

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

  • Profile Image
    clarkschool
    Answered on April 19, 2016 at 11:34 AM

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