How To Change Font Style of Text and Labels in Gift Registry Widget?

  • Profile Image
    Vezelay
    Asked on February 03, 2015 at 06:45 PM
    how do I get the "Form Style" tab?

    I do see the a "Setup & Embed" tab as well as a "Properties; ..." tab. But I don't have a "Form Style" tab....

    I checked on different forms and different widgets... but non "Form Style" tab.

    Thanks!

  • Profile Image
    jonathan
    Answered on February 03, 2015 at 06:56 PM

    Hi,

    Since JotForm now uses the new Form Designer, we have move most of the style tools in the designer. But you can still do some common styling within the Form Builder.

    For the Style tab, you can access it by

    #1 Click Setup & Embed

    #2 Preferences

    #3 Form Styles

    the Style tab should be available.

     

    then you can now use the Font styles to use in your Gift Registry widget on the form.

    Hope this help. Let us know if you need further assistance.

    Thanks.

     

  • Profile Image
    Vezelay
    Answered on February 04, 2015 at 03:42 AM

    Hello,

    It doesn't seem to do it for me...

    In both cases, it allows to change the font of the labels - for all of the forms/widgets but it has no influence at all on the font inside the Gift Registry Widgets.

    I tried through the designer with no success either. 

    The issue is the font "inside" the widget.

     

    Thanks,

     

     

  • Profile Image
    Charlie
    Answered on February 04, 2015 at 09:26 AM

    Hi,

    You can change the font of the widget text by adding a custom CSS code inside the widget itself.

     

    In my case, I use the import function of Google Fonts, you can find it here: https://www.google.com/fonts.

    1. In Google Fonts website, choose a font and click "Quick Use".

    2. Scroll down and click "Import", you should use the code then.

     

    This is the custom CSS code that I will add in my widget:

    @import url(http://fonts.googleapis.com/css?family=Open+Sans:800italic);

    label {

    font-family: 'Open Sans';

    }

     

    I hope this helps. You can also check this guide that we have: http://www.jotform.com/help/100-Beautify-your-Form-with-Google-Web-Fonts.

    Here's a demo form that have to see the changes: http://form.jotformpro.com/form/50343675351958.

    Let us know if you need more assistance on this.

    Thank you.

  • Profile Image
    Vezelay
    Answered on February 04, 2015 at 01:03 PM

     

    Works fine... I am now able to modify the font and size of the registry item label!

    How could I now access the item counter label (the green text on the right - like change the green to red)?

    Thanks so much.

     

  • Profile Image
    Ben
    Answered on February 04, 2015 at 02:35 PM

    That is great to hear.

    Now in regards to your question about the green text on the right - It can be styled by using this class: items-left

    This means that this code:

    .items-left {
       color: red;
    }

    would change the color of that text to red.

  • Profile Image
    Vezelay
    Answered on February 04, 2015 at 06:05 PM

    Right on the stop! Thank you so much!