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.

Styling GF in version 1.5 - best practice?

  1. I've recently created a couple themes and have included custom styles for Gravity Forms. However, it required the user to turn off CSS output in the GF Forms Settings. With GF 1.5, there are some handy features with the CSS Ready Classes. Turning off the output, turns these off as well.

    My question I guess is to ask what people have found to be the best way to style gravity forms without turning off CSS Output while also not having to add "!important" markup all over the stylesheet? Best practices?

    Posted 13 years ago on Monday December 27, 2010 | Permalink
  2. Better CSS specificity will usually do the trick for you. Instead of just..

    .gfield {margin:10px}

    you go with something more specific like this

    body .gform_wrapper ul.gform_fields li.gfield {margin:10px}

    If done right, in many cases better specificity will override an "!important" statement.

    http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

    Of course, you can always still copy the ready class styles from the plugin style sheet and incorporate those into your new ones if you still want turn off the CSS output.

    Posted 13 years ago on Monday December 27, 2010 | Permalink