How can I change the used font in a theme (font in textboxes)

  • Profile Image
    Cajonworkshops
    Asked on July 29, 2011 at 11:26 AM

    Hi JotForm Support,

    I want to use the paper grey theme for building a form, but don't like the font, that is beiing used in all the textboxes (the fields where you can write in). I would like to use verdana, tried to edit in preferences - form styles - inject custom css, but wasn't successfull.

    I'd be very greatfull for your help.
    Can you provide me the exact syntax to paste into.

    btw: once I paste something into "inject custom css" I cannot make changes to it afterwords.
    (bug or feature ? ;-)

    thank you for your help...

    Michaela

  • Profile Image
    abajan
    Answered on July 29, 2011 at 01:48 PM

    Hi Cajonworkshops

    Thanks for asking. Please inject the following rule and let us know if it suits your requirements:

    .form-textbox, .form-textarea {
    font-family: Verdana;
    font-weight: Normal;
    }

    If there's anything else related to our product with which you need assistance, please let us know.

    Thanks.


    ~ Wayne

  • Profile Image
    Cajonworkshops
    Answered on July 29, 2011 at 05:05 PM

    Hi Wayne,

    worked... thank you for your help.

    Just one more question.

    If I want to use the submit button of the Pastell theme in another Theme, how can I do that?

    I must say... this is one of the best supported products I've ever used.

     

    Thank you so much...

    Michaela

     

  • Profile Image
    NeilVicente
    Answered on July 29, 2011 at 05:58 PM

    Michaela,

    To answer in behalf of Wayne, please inject the css code I provided below to use the submit button style of the Pastel theme

    .form-submit-button {
        background: -moz-linear-gradient(center top , #FAA84C 0%, #FF7B0D     100%) repeat scroll 0 0 transparent;
        border: 1px solid #C64F00;
        border-radius: 4px 4px 4px 4px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
        color: #FFFFFF;
        font-size: 12px;
        padding: 6px 18px;
        text-shadow: 0 -1px 0 #C64F00;
    }


    .form-submit-button:hover {
        background: -moz-linear-gradient(center top , #FBCB5D 0%, #EFA003    100%) repeat scroll 0 0 transparent;
        border-color: #D08A01;
    }

     

    To apply the same style to all other buttons such as clear, print, and page break buttons, please use these codes instead:

    .form-submit-button, .form-submit-reset, .form-submit-print, .form-pagebreak-back, .form-pagebreak-next {
        background: -moz-linear-gradient(center top , #FAA84C 0%, #FF7B0D 100%) repeat scroll 0 0 transparent;
        border: 1px solid #C64F00;
        border-radius: 4px 4px 4px 4px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
        color: #FFFFFF;
        font-size: 12px;
        padding: 6px 18px;
        text-shadow: 0 -1px 0 #C64F00;
    }


    .form-submit-button:hover, .form-submit-reset:hover, .form-submit-print:hover, .form-pagebreak-back:hover, .form-pagebreak-next:hover {
        background: -moz-linear-gradient(center top , #FBCB5D 0%, #EFA003 100%) repeat scroll 0 0 transparent;
        border-color: #D08A01;
    }

     

    Hope you find this useful. Thank you for using Jotform!


    Neil