slash25 code

  • Home
  • Work
  • Code
  • Github
  • WordPress Austin
  • Blog
You are here: Home / Code / Customizing Gravity Forms CSS
August 24, 2012 By Pat · Leave a Comment

Customizing Gravity Forms CSS

August 24, 2012 by

Gravity Forms has its own CSS. You can over-ride those in your theme’s style sheet usually by copying what you see from Firebug or Chrome Inspector and adding something like “body” or “form” to them.

For example, a label element might have these styles in Gravity Forms default css:

.gform_wrapper .top_label .gfield_label {
margin: 10px 0 4px 0;
font-weight: bold;
display: -moz-inline-stack;
display: inline-block;
line-height: 1.3em;
clear: both;
}

If I want to change something, I would copy this into my style sheet and add the form tag to it:

.gform_wrapper form .top_label .gfield_label {

}

Now I can change things:

.gform_wrapper form .top_label .gfield_label {
margin: 10px 0 2px 0;
font-weight: normal;
display: block;
line-height: 1.5em;
clear: both;
color: #00a0ea;
font-size: 1em;
}

Tagged With: CSS

copyright © 2020 slash25 code | privacy policy | pat on twitter