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

    CSS code not working correctly

    Asked by markkeane on February 17, 2017 at 06:24 AM

    Hi,

    My CSS code works in advanced design mode but doesn't work in build mode or live mode. Can you please assist me with resolving this issue.

     

    Regards

    Mark

    Page URL:
    https://form.jotformeu.com/70472434287358

    Screenshot
  • Profile Image
    JotForm Support

    Answered by liyam on February 17, 2017 at 08:19 AM

    Hello,

    I can't seem to find your form. Did you have recently deleted? 

    Thanks.

  • Profile Image

    Answered by markkeane on February 17, 2017 at 08:42 AM

    Hi

    I changed the url here is the new one.

     

    https://form.jotformeu.com/markkeane/safety-statement-questionnaire

     

    Regards

     

    Mark

     

  • Profile Image
    JotForm Support

    Answered by Jim_R on February 17, 2017 at 10:26 AM

    Hey Mark, I'm assuming you want the upload buttons to be #52247f then #ffffff on hover. Just change your entire CSS Code block for the .qq-upload-button to the ones shown below:

    .qq-upload-button {

        background : #52247f;

        text-shadow : none;

        box-shadow : none;

        color : #ffffff;

        border-color : #52247f;

        border-width : 2px;

        font-family : "Trebuchet MS";

    }

    .qq-upload-button-hover {

        background : #ffffff;

        text-shadow : none;

        box-shadow : none;

        color : #52247f;

        border-color : #52247f;

        border-width : 2px;

        font-weight : bold;

        font-family : "Trebuchet MS";

    }

    RESULT:

    In case you wanted it rendered differently, just get back to us with more details on how you want it to behave so we can provide the respective CSS Codes.

  • Profile Image

    Answered by markkeane on February 17, 2017 at 10:46 AM

    Hi Jim 

    Thanks for your help that works well, do you mind telling me what I was doing wrong for further reference.

    Thanks

    Mark

  • Profile Image
    JotForm Support

    Answered by Jim_R on February 17, 2017 at 11:57 AM

    Sure - It was due to the CSS selector you're using.

    I changed it from .qq-upload-button.undefined to .qq-upload-button

    And for the hover status, there's a separate class already taking care of that so you won't need to use the :hover selector (.qq-upload-button-hover).

    I also changed the font-family declaration BTW. Fonts with 2 words in it should always be enclosed in quotation marks.

    font-family: "Trebuchet MS";

  • Profile Image

    Answered by markkeane on February 17, 2017 at 12:06 PM

    Thanks for the feedback Jim much appreciated.