Change the color of the remaining items of the Gift Registry widget

  • m.ayfan
    Asked on March 25, 2025 at 3:41 PM

    I need to change the font color of the Availability Field of the Gift registry widget CSS, which is by default green color (ex: 1 left) I need the CSS code.

  • Jovito JotForm Support
    Replied on March 25, 2025 at 9:07 PM

    Hi m.ayfan,

    Thanks for reaching out to Jotform Support. You can easily inject a CSS code to the Gift Registry widget to change the color of the items left per product. Let me show you how:

    1. First, copy this CSS code. You can change the value of the color attribute based on your preference.

    span.items-left {
    
  color: red;
    
}

    2. Then, click on Widget Settings and go to Custom CSS tab.

    3. Paste the code and click on Update.

    Change the color of the remaining items of the Gift Registry widget Image 1 Screenshot 30 Here's what it'll look like:

    Change the color of the remaining items of the Gift Registry widget Image 2 Screenshot 41Give it a try and let us know how it goes.

  • m.ayfan
    Replied on March 26, 2025 at 3:10 AM

    Many thanks for your reply and support, I think it would be better if you can add the items CSS id or class id names so if we need to change or write and CSS code, it will be easy for us to find them inside the widget or the element itself for easier navigation.


    I would like to say something about Jotform and the great team working on it, I am really impressed by the development and enhancement you are doing with your form building and the comprehensive solutions and integrations you are doing to facilitate many things for the users.

    As a suggestion, I think it would be great if you can have a direct integration with WooCommerce as we need it always and most of the users are using it on their websites.


    Also, if you can provide external API integrations with the other systems like SIS systems that are based on .NET platform and LMS systems like Moodle and others, so we can integrate them and be able to use the forms inside those systems.

    Keep up the good and hard work, this is the subscription that we never regret to go with.

    You are the best

    Wish you all the best 👌☺️😃

  • Lara JotForm Support
    Replied on March 26, 2025 at 7:00 AM

    Hi m.ayfan,

    It's easy to identify the class or ID of the element you want to customize using CSS. Let me show you how:

    1. While your form is open, right-click on the page and select Inspect.
    2. In the upper-left corner of the Developer Tools, click the arrow icon (the element selector).
    3. Click on the element you want to customize.
    4. In the lower-right panel, click the plus (+) icon to add a new CSS rule. The element's identifier (class or ID) should be then displayed.

    Change the color of the remaining items of the Gift Registry widget Image 1 Screenshot 20 You can then use this identifier in Jotform's CSS editor to customize the element. As for your other questions, you can go ahead and check them out on these links:

    Let us know if there’s anything else we can help you with.

Your Answer