PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Form background color

  1. Please see . I want all the background on the form to be the same color as the the body background of the site. I have this and it takes care or 80% of the background. I tried a few things but have been unsuccessful. Thanks in advance for the help.

    [css]
    /* Gravity Forms
    ------------------------------------------------------------ */
    div.gform_wrapper { background-color:#E8E1C5 },
    
    div.gform_wrapper input,
    div.gform_wrapper select,
    div.gform_wrapper textarea {
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
    	font-size: 14px !important;
    	padding: 4px 5px !important;
    }
    
    div.gform_footer input.button {
    	color: #ffffff;
    }
    
    div.gform_wrapper .ginput_complex label {
    	font-size: 14px;
    
    }
    
    div.gform_wrapper li,
    div.gform_wrapper form li {
    	margin: 0 0 10px;
    
    }
    
    div.gform_wrapper .gform_footer {
    
    	border: none;
    	margin: 0;
    	padding: 0;
    }
    Posted 11 years ago on Wednesday January 9, 2013 | Permalink
  2. Please share the URL of the page on your site where we can see a Gravity Form so we can help you with the CSS. Thank you.

    Posted 11 years ago on Wednesday January 9, 2013 | Permalink
  3. My bad. http://baltimore-custom-homes.com/contact-us/

    Thanks for looking.

    --Perry

    Posted 11 years ago on Wednesday January 9, 2013 | Permalink
  4. Please try adding this to your theme's stylesheet:

    [css]
    body .gform_widget {
        background: #E8E1C5!important;
    }
    Posted 11 years ago on Wednesday January 9, 2013 | Permalink
  5. Thanks Chris,
    I am getting closer. There is still white under the submit button, in the footer, and a white border to the right of the form. And I was no clear on my request, I want the form background to be the gray color and the input fields to remain white. Here is what I have now on http://baltimore-custom-homes.com/contact-us/

    [css]
    /* Gravity Forms
    ------------------------------------------------------------ */
    div.gform_wrapper { background-color:#E8E1C5 },
    body .gform_widget {
        background: #E8E1C5!important;
    }
    
    div.gform_wrapper input,
    div.gform_wrapper select { background-color:#E8E1C5 },
    div.gform_wrapper textarea {
    color:#E8E1C5
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
    	font-size: 14px !important;
    	padding: 4px 5px !important;
    }
    
    div.gform_footer input.button {
    	color: #ffffff;
    }
    
    div.gform_wrapper .ginput_complex label {
    	font-size: 14px;
    
    }
    
    div.gform_wrapper li,
    div.gform_wrapper form li {
    	margin: 0 0 10px;
    color:#E8E1C5
    }
    
    div.gform_wrapper .gform_footer {
    color:#E8E1C5
    	border: none;
    	margin: 0;
    	padding: 0;
    }
    Posted 11 years ago on Wednesday January 9, 2013 | Permalink
  6. What you are asking to do is what I achieved with the line of CSS I posted previously. Can you tell me in what stylesheet you added that code?

    Additionally, this file is referenced twice in the source of your page (which is not necessary) and it is 404 not found (which is not good):

    http://baltimore-custom-homes.com/wp-content/themes/SitesInOneDay22/css/default.css

    Can you remove the references to that or make sure the file is found? And then let us know where you added your custom CSS to style the widget background. Thank you.

    Posted 11 years ago on Wednesday January 9, 2013 | Permalink
  7. This is a Studio Press theme, Megalithe community child theme. I am using the Color Scheme = purple. That is the style is located in wp-content/themes/SitesInOneDay22/css/purple.css. I do not see a default.css in that folder.

    All my editing has been in the purple.css through Appearance > Editor. And what I put in my previous post is everything I have under cfroms in my Style.

    --Perry

    Posted 11 years ago on Wednesday January 9, 2013 | Permalink
  8. The problem with the default.css is that the theme is looking for it, but it's not there. You should remove the reference to it, or add a blank default.css file or something, to prevent the error. It just indicates that something is not right. It's not related to your background problem.

    You have some invalid CSS in that purple.css file. Please check the validation:
    http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fbaltimore-custom-homes.com%2Fwp-content%2Fthemes%2FSitesInOneDay22%2Fcss%2Fpurple.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

    You can probably ignore the errors on lines 3 and 4, but lines 18 and 20 are actually a problem that should be resolved. Invalid CSS can make any rules you add afterward not work as expected.

    However, I added this CSS to the end of purple.css:

    [css]
    body .gform_widget {
    background: #E8E1C5!important;
    }

    And I got this result: http://minus.com/lyoiTSMiqUVso

    Is that what you're looking to do?

    Posted 11 years ago on Thursday January 10, 2013 | Permalink