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.

Custom CSS worked, then didn't.

  1. DanielBurns
    Member

    OK I have a really basic form, Name and Email fields, that's it. I wanted to customize the input areas, specifically, the height of the field, the input text and the label.

    I used this page to add some code to my CSS file:

    http://www.gravityhelp.com/frequently-asked-questions/faq-styling-formatting/

    It worked perfectly (I swear it was working) I was able to increase the box height and the text size. I then added CSS to change the labels and once I did, the style for the box height and text size stopped working. Adding or removing the styling for the label still works, but something is overriding the height and font styles.

    I swear it worked at first and although I am a CSS noob, I have a feeling that adding the style to the label didn't have anything to do with the style for the input field height and font size not working. It must be something else, but I don't know where to look.

    Any advice would be appreciated.

    This is what I have in my style.css right now:

    /* Gravity Forms Customizations */
    
    /* Box Height */
    body .gform_wrapper .gform_body .gform_fields .gfield select {
    	height:35px
    	}
    
    /* Text Height */
    body .gform_wrapper .gform_body .gform_fields .gfield textarea {
    	font-size:22px;
    	}
    
    body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {color:red}
    Posted 13 years ago on Tuesday September 20, 2011 | Permalink
  2. DanielBurns
    Member

    Inspecting the elements of the page show that it is using the style from the forms.css, not the theme's CSS file.

    But when I read the forms.css file it clearly stated not to use that for modifications since it is overwritten on updates, instead to use my theme's stylesheet.

    I'm more than a little confused.

    Thanks.

    Posted 13 years ago on Tuesday September 20, 2011 | Permalink
  3. Nope, don't edit the forms.css file. You can make all the changes you need in the theme stylesheet if done properly. Please post a URL your form page and I'll be happy to take a look at it. It's easier for me to see it and give you a specific answer rather than just guess.

    Posted 13 years ago on Tuesday September 20, 2011 | Permalink
  4. DanielBurns
    Member

    here you are:

    http://experiencegravity.com/services/video-marketing/

    thank you.

    Posted 13 years ago on Tuesday September 20, 2011 | Permalink
  5. Okaaaay. I get it now.

    Your CSS is targeting the wrong elements. You're targeting a select element ( drop-down ) and a textarea ( paragraph text ) - neither of which appear in this form. You probably want to do something like this.. I'd make it specific to this form ID too since you probably don't want all of your forms to format this way.

    [css]
    /* Gravity Forms Customizations */
    
    /* input height */
    body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text],
    body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=email],
    body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=url],
    body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=tel],
    body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=number],
    body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=password],
    body #gform_wrapper_1 .gform_body .gform_fields .gfield select {
    	height:35px
    }
    
    /* text size */
    body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text],
    body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=email],
    body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=url],
    body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=tel],
    body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=number],
    body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=password],
    body #gform_wrapper_1 .gform_body .gform_fields .gfield select,
    body #gform_wrapper_1 .gform_body .gform_fields .gfield textarea {
    	font-size:22px
    }
    
    /* label color */
    
    body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_label {
    	color:red
    }

    That should take care of all the field types you might use. You don't need all of them, but this adds support for all the field types if you want to use them in the future.

    test screenshot: http://bit.ly/plhJ9N

    Posted 13 years ago on Tuesday September 20, 2011 | Permalink
  6. DanielBurns
    Member

    Excellent. Thank you.

    I don't think I see anything in this code to target the submit button. Can you point me in the right direction to make mods to that as well?

    Thank you again for your help.

    Dan

    Posted 13 years ago on Wednesday September 21, 2011 | Permalink
  7. Yep, that's all in the documentation here as well… see section 9.2

    http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

    [css]
    body #gform_wrapper_1 .gform_footer input[type=submit] {
         border:1px solid red
    }
    Posted 13 years ago on Wednesday September 21, 2011 | Permalink

This topic has been resolved and has been closed to new replies.