CSS code not working correctly

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

  • Profile Image
    liyam
    Answered 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
    markkeane
    Answered 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
    Jim_R
    Answered 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
    markkeane
    Answered 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
    Jim_R
    Answered 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
    markkeane
    Answered on February 17, 2017 at 12:06 PM

    Thanks for the feedback Jim much appreciated.