How can I change the color in ALL the buttons on my form?

  • Profile Image
    dejamour
    Asked on May 10, 2012 at 02:10 PM

    I read how to change the colors on Multiple uploads, but I'd like to have consistent looking buttons for ALL the buttons (submit, cancel, print, upload, browse, etc.) throughout my whole form to look like these buttons...

     

    /* custom BLUE multi-upload buttons */ .qq-upload-button { background: #66CCFF; background: -moz-linear-gradient(top, #66CCFF 0%, #312492 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66CCFF), color-stop(100%,#312492));
    background: -o-linear-gradient(#66CCFF, #312492);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66CCFF', endColorstr='#312492') !important;
    zoom: 1; text-shadow: 0 -1px #312492;
    border: 1px solid #312492;
    } .qq-upload-button-hover { background: #66FFCC;
    background: -moz-linear-gradient(top, #66FFCC 0%, #339999 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66FFCC), color-stop(100%,#339999));
    background: -o-linear-gradient(#66FFCC, #339999);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66FFCC', endColorstr='#339999) !important;
    zoom: 1; }
    So how do I do that? TIA, dejamour
  • Profile Image
    jeanettebmz
    Answered on May 10, 2012 at 05:12 PM

    I would suggest you to insert custom CSS and modify the following classes:

    .form-submit-button, .form-submit-reset, .form-submit-print, .form-screen-button, qq-upload-button

    However, I am not sure , which elements you wish to modify in total, so please make sure you look for the class of the element and modify it.

    At any rate, based on the color codes your have pasted on your post, here I leave you an example:

     

    .qq-upload-button {
    background: #66CCFF!important;
    color: #312492!important;
    text-shadow: 0 -1px #312492!important;  }

     

    .form-submit-button {
    background: #66CCFF!important;
    color: #312492!important;
    text-shadow: 0 -1px #312492!important;  }
     

    .form-submit-reset{
    background: #66CCFF!important;
    color: #312492!important;
    text-shadow: 0 -1px #312492!important;  }

    .form-submit-print {
    background: #66CCFF!important;
    color: #312492!important;
    text-shadow: 0 -1px #312492!important;  }
     

    .form-screen-button {
    background: #66CCFF!important;
    color: #312492!important;
    text-shadow: 0 -1px #312492!important;  }

     

     Hope this helps you to accomplish what you are looking for. Feel free to to ask for more assistance, we are always glad to help

    Jeanette

  • Profile Image
    dejamour
    Answered on May 12, 2012 at 06:36 PM

    Thanks so much for your reply.

    May I make a suggestion? That when someone selects a theme for the form that there ba a panel that offers button choices for ALL the buttons in a form to have a consistent look and feel to them? And WITHOUT us users having to go in and "inject" CSS. As you know, it is SOOO easy to mess up by leaving off just a tiny little comma or period or not close a statement. We have come to JotForm for its simplicity, ease of use and for the very fact that many of us DO NOT KNOW how to do code, nor do we want to!

    And certainly, many of us don't knwo where to look for the buttons, or what their names may be. Plus, when you add different languages to the mix (as in my case, French and Spanish), there needs to also be a way to change anything else that is visible to a form visitor who speaks a foreign language.

    Any plans of simplifying this for us multilinguals in the near future?

    Thansk!

  • Profile Image
    jeanettebmz
    Answered on May 12, 2012 at 09:30 PM

    Hello again!

    I apoligize if it seemed my answer would involve a lot of effort for you

    Actually, there is already a workaround regarding to the customization of the Submit, Print and Clear Button,despite the type of language. But it is limited to a certain number of colors

     

    But when it comes to the upload button, there is no way to customize it in the same way as the the ones mentioned above, besides the injection of the custom  CSS code

     

     

     

    I will forward your suggestion to 2nd level, so they can take it into consideration such feature to be implemented in the feature.

    Cheers!

    Jeanette