How to customize Pastel theme?

  • Profile Image
    suke
    Asked 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?

  • Profile Image
    NeilVicente
    Answered 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
    suke
    Answered 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
    abajan
    Answered 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