I am having issues getting the CSS code correct on my form.

  • Profile Image
    ben@spadegardens.com
    Asked on October 01, 2017 at 11:52 PM

    Hi.  I am having issues getting the CSS code correct on a couple of items.  I'm sure this is minor, but  it seems like as soon as I figure it out, it changes something else, or something else forces it to change back.

    The issues I am having in the form are:
    1. The font color for the Header & Sub-header fields (top of the form - 2 header widgets used back to back - 2nd one only uses the sub-header) keeps changing to a shade of blue.  The color should be a solid black (hex #000000) with an overlay /transparency set to 85%.  An equivalent RGBA is cool also to match the rest of the font color on the form.
    2. Same space on form as #1.  The font style should be "Roboto" and it also keeps changing here - where does it get set to a style so it can't be changed?  I've tried doing it in the form builder tool, the advanced designer tool, and thru CSS to no avail.
    3. All of the multiple choice answer circles need to be dark green (hex #046A38).  Here again, I've had it there and something keeps changing it back to the current blue.

    Thanks for your help with this.

  • Profile Image
    Chriistian
    Answered on October 02, 2017 at 04:14 AM

    I cloned the form (http://www.jotform.us/form/72443128484155) and as per checking, it seems that current theme is overriding the CSS you are trying to apply on your form.

    To make the CSS work, please try adding !important on your CSS code. 

    For example, to change the font color of the header and sub-header, please try adding this CSS code below:

    .form-header-group .form-header, .form-header-group .form-subHeader { 

        color: #000 !important;

    }


    To change the color of multiple choice answer circles into dark green  #046A38, please see the code below:

    .form-radio-item:not(#foo) label:before {

       border: 2px solid #046A38 !important;

    }

    .form-radio-item:not(#foo) label:after {

         border: 2px solid #046A38 !important;   

    }


    Hope that helps.

    Let us know if you need further assistance.