Re: How to customize Pastel theme?

  • Profile Image
    suke
    Asked on July 25, 2011 at 02:13 AM

    hi wayne
    thx for yr help
    sorry my english isn't good :D
     i attach a  pic of what i want to do. in that pic that i attach for
    you, i change the css code with firebog widget (in firefox) as you now
    this change after refreshing the page go away.
    so see the pic and plz tell me how can i change the theme to that pic

  • Profile Image
    brx250
    Answered on July 25, 2011 at 02:29 AM

    Hi suke,

    First of all, thank you for using JotForm.

    Try adding the following CSS code snippets to your form. This should fix your problem.

     

    .form-header { color:#ffffff; background:#0303cf; } .form-header-group { background:none repeat scroll 0 0 #0303cf; }

    .form-submit-button, .form-submit-reset, .form-submit-print {

        -moz-border-radius: 5px 5px 5px 5px;

        -webkit-border-radius: 5px 5px 5px 5px;

        -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

        -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

        background: #0004ff;

        background: -moz-linear-gradient(top, #0004ff 0%, #0303cf 100%);

        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0004ff), color-stop(100%,#0303cf));

        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0004ff', endColorstr='#0303cf',GradientType=0 );

        border: 2px solid #FFFFFF;

        color: #FFFFFF;

        font-size: 16px;

        font-weight: bold;

        margin: 0;

        overflow: visible;

        padding: 10px;

        text-shadow: 0 0 5px #777777;

        width: auto;

    }

     

    If you have other questions, please feel free to contact us.

     

    _____________________________________________

    Albert | JotForm Support

  • Profile Image
    suke
    Answered on July 26, 2011 at 05:04 AM

    hi 

    i very very enjoy for using of jotform. thanks a lot a lot a lot.....

    thanks for yr good supporting, i hope that u are be succeed in any work that u do :)

    sorry for my bad english :D

    all the best

    suke

  • Profile Image
    Answered on July 26, 2011 at 05:06 AM

    if any one elss have this problem here is the answer

    Answered by mliz

    Hi there,

    The closing tag for the css code of the form header was duplicated which created
    conflict with the css of the submit button.

    I managed to duplicate the form for testing purposes you can find the working
    sample here:  http://www.jotform.com/form/12053110517

    This is the code without  the duplicate closing tag:


    .form-header { color:#ffffff; background:#3b5998; }
    .form-header-group { 
    background:none repeat scroll 0 0 #3b5998;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    background: #3b5998;background: -moz-linear-gradient(top, #3b5998 0%, #3b5998 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0004ff), color-stop(100%,#0303cf));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b5998', endColorstr='#3b5998',GradientType=0 );
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    overflow: visible;
    padding: 10px;text-shadow: 0 0 5px #777777;
    width: auto;
    }

    .form-submit-button, .form-submit-reset, .form-submit-print { 
    -moz-border-radius: 5px 5px 5px 5px; 
    ! -webkit-border-radius: 5px 5px 5px 5px;
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    background: #3b5998; 
    background: -moz-linear-gradient(top, #3b5998 0%, #3b5998 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b5998), color-stop(100%,#3b5998));
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b5998', endColorstr='#3b5998',GradientType=0 );
     border: 2px solid #FFFFFF;
     color: #FFFFFF; 
     font-size: 16px; 
     font-weight: bold;
     margin: 0;
     overflow: visible;
     padding: 10px; 
     text-shadow: 0 0 5px #777777;
     width: auto; }

    Hope this helps.

    Regards,
    Mliz

  • Profile Image
    brx250
    Answered on July 26, 2011 at 06:50 AM

     

    Hi suke, 

    We're glad to know that you've sorted your issues already. 

    If you do have other questions in the future, you are more than welcome to contact us again.

    __________________________________________________
    Albert JotForm Support