Custom CSS: Not able to edit the design of the upload field button and want to reduce some gaps

Hello there!

I've tried several times on my form "2016 Field Day Host Bio and Media Form" to apply custom CSS in the Designer to page break buttons, and to the color and positioning of the file upload widget button. In the designer, the changes appear to have taken place. I have ensured that I have saved my changes. But once I go to preview the form, or return to the form builder, the changes are gone.

This has happened several times ... What's going on?

For my file upload button, I want it to be center-aligned, colored with #f6b983, and the font color to be #9d3c22, bold, and either the same font I have used in my headers (IM Fell DW Pica) or "Chaparral Pro." I'd like a stroke around the button, in the same red code as the font, and no text shadow.

There are other weird little issues as well: I can't seem to get those wide gaps at the top of each form page, before the first header, to disappear.

Also, in my form preferences, I specified secondary label colors to be #9d3c22, but they haven't shown up. That's more of a minor point... stylistically, it would be nice, but I'm more flummoxed by why the custom CSS is not saving.

Thanks for your help!

tamsyn

I wanted to share the screenshot of how this looks in preview, but couldn't seem to upload two screenshots with my original question. Here it is:

After reviewing your CSS code I noticed that you did not include the ID of the upload field.

#cid_75 div.qq-upload-button {

    border : 2px solid !important;

    border-color : #9d3c22 !important;

    margin-left : 150px !important;

    margin-right : -150px !important;

    font-family : "Chaparral Pro", "myriad pro", Open Sans !important;

    font-size : 18px !important;

    font-weight : bolder !important;

    background : #f6b983 !important;

    color : #9d3c22 !important;

    text-shadow : none !important;

}

To reduce the gap you may insert the following code

#cid_157 {

    margin-top : -50px !important;

}

#id_139 {

    margin-top : -50px !important;

}

Please let us know if this helps.

Thanks very much, Victor! That worked. I also see that there's a difference between making a global change to all similar elements, versus just one specific instance of an object.

Thanks for your quick response.

Best,

tamsyn