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.

Newbie to CSS

  1. David Plum
    Member

    Hello.

    I am running the Thesis theme at my website and I wish to use the build in css for forms instead of the Gravity default.

    This is the styles I would like to use (comment section): http://66.147.244.62/~freakstr/?p=43

    This is the form (among many) I would like to change: http://66.147.244.62/~freakstr/?page_id=122

    I do know how to change the style of each form in Gravity through my custom CSS file. However, is there a way to customize EVERY input field and not just one at a time (.medium, .large ect)?

    Also, how come the thesis css does not take over when I disable the default CSS in the Gravity Form settings?

    Thanks,

    David

    Posted 7 years ago on Monday July 11, 2011 | Permalink
  2. David, your forms look very similar to me. To begin with, Gravity Forms has very little default styling for inputs so the borders, background colors and button styles that you're seeing are coming from the Thesis theme already.

    What is it in particular that you want to change?

    Posted 7 years ago on Monday July 11, 2011 | Permalink
  3. David Plum
    Member

    Hello Kevin,

    I styled the submit button on the Gravity Form (through the custom css file) to replicate the submit button shown in the comment section. I have now changed things back to default.

    Take a look at http://66.147.244.62/~freakstr/?p=43 again.

    Notice how the input fields actually has borders. Notice how these borders also change in color when the fields are focused (they get a yellow glow). As you can see the fields are also a bit higher and the text size is larger.

    At last, as you may notice now, the submit button looks different.

    Posted 7 years ago on Monday July 11, 2011 | Permalink
  4. Okay, sounds like you were on the right track with the button styling. I don't see any yellow glow so it must be a browser style that you're seeing there but the same goes for the input elements. Simply add some new rules with additional padding & font size properties to emulate the look of the theme styles.

    You can find examples of how to properly target and manipulate all of the form elements here.

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

    and there's also a visual guide here to help you get the lay of the land when it comes to the form structure if you need.

    http://www.gravityhelp.com/resources/cssguide/css_guide.html

    Posted 7 years ago on Monday July 11, 2011 | Permalink
  5. David Plum
    Member

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

    Awesome, Kevin. That was exactly what I was looking for. Thanks! :)

    Posted 7 years ago on Monday July 11, 2011 | Permalink
  6. Great David, Glad I could point you in the right direction.

    Posted 7 years ago on Monday July 11, 2011 | Permalink
  7. NTMedia
    Member

    hello - just a quick question. I think this CSS guide will do the trick, but before I dive in, will it still work similarly if you're placing the form in manually via the html how you discuss here? http://www.gravityhelp.com/documentation/page/Embedding_A_Form

    http://kaizendev.pairserver.com/ntunemedia/#contact-border

    I'm also using the thesis theme fwiw

    Posted 7 years ago on Wednesday July 13, 2011 | Permalink
  8. Sure, once the form is rendered the markup/structure is the same no matter which method you use to actually embed it. If you're using the php function call method to embed the form, you'll need to remember to manually enqueue the scripts as detailed in the documentation on the page below.

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

    Posted 7 years ago on Wednesday July 13, 2011 | Permalink