What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to customize Pastel theme?

    Asked by suke on July 24, 2011 at 02:41 PM

    hi 

    thanks for ur supporting

    i have a problem with themes :( i can't change the heading style and color to my own style, plz help me i realy need to change the color of heading and submit button. how can i do that?

    Screenshot
  • Profile Image
    JotForm Support

    Answered by NeilVicente on July 24, 2011 at 03:23 PM

    Hi,

    To change the color of the heading text, please inject this custom css code onto your form:

    .form-header-group, .form-collapse-table, .form-pagebreak {
        color: blue;
    }

    You can choose more web-safe colors on the links I provided below:

    HTML Color Codes 
    HTML Color Names

    To inject custom css:

    1.  Go to Setup & Embed tab
    2.  Click Preferences Form button
    3.  Choose Form Styles tab
    4.  Copy and paste the css code in the Inject Custom CSS textarea


     

    As for the submit button:

    Please inject the following css codes onto your form, but change the bolded color codes to any HTML Color Codes or HTML Color Names that you prefer

    Button's default state:

    .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;
    }

    This is for the button's hover effect:

    .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;
    }

     

    This is for the button's active state:

    .form-submit-button:active, .form-submit-reset:active, .form-submit-print:active, .form-pagebreak-back:active, .form-pagebreak-next:active {
        background: -moz-linear-gradient(center top , #EFA003 0%, #FBCB5D 100%) repeat scroll 0 0 transparent;
        border-color: #D08A01;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 4px rgba(0, 0, 0, 0.1) inset;

    }

    Hope you find this helpful. Let us know if you have further questions or concerns. Thanks!


    Neil

  • Profile Image

    Answered by suke on July 24, 2011 at 03:44 PM
    oh my god thanks bro its realy work, thanks a lot :) now the button is that
    i want
    just another thing i want to change the background color of theme to blue
    not the text of heading. how can i change the color of background from (
    #333333 0% ,#4a4a4a 100% ) to blue?
    thanks a lot for ur help

  • Profile Image
    JotForm Support

    Answered by abajan on July 24, 2011 at 07:55 PM

    Hi suke

    I'm not sure but I think you're asking about how to change the background color of your form. Since the backgound of Pastel themed forms consists of an image (http://www.jotform.com/images/noises/noise.png) and background images are stacked above background colors, that link to noise.png in the Pastel theme style sheet needs to be overridden in the injected CSS before applying a color. The following rule accomplishes this:

    .form-all {
    background: none PowderBlue;
    }

    You can always change the color to suit. Please note that even though the work area of the form builder will not show the change, the preview will.

    Even though noise.png is mostly transparent, including the none value to surpress the display of the image unnecessary for most modern browsers. However, some browsers either don't support alpha transparency or only partially support it. Therefore, to offset any problems, it's best to remove the image altogether.

    If I have misunderstood what you wanted to do, please clarify.

    Thanks.


    ~ Wayne