Where to Put Your Custom CSS

Use the WordPress Customizer

WordPress includes a tool to enable you to tailor the presentation of your theme. Included in that, is a way to add custom CSS code. Do the following:

  1. From your site admin dashboard, click the Appearance option.
  2. Under Appearance, choose Customize.
  3. That will be take you into the theme customizer, where you can find the Additional CSS tool.

Remember, these custom CSS changes are kept with your theme, so will be lost if you change themes.

This external article covers the basics of the customizer, and as always, your can refer to the official WordPress documentation for a detailed list of the options.

Using a Third Party Plugin

There are third-party plugins that allow you to add additional styles to your theme without editing the core theme files. They often allow you to target changes to only specific form pages, and it may keep your changes intact, even if you decide to switch themes or your theme provider issues an update.

The good folks at Gravity Wiz have a free plug-in called Code Chest which will output your form-specific code (JavaScript and CSS) right where it needs to be.

The Custom CSS & JS Pro plugin by SilkyPress.com is a well-established plugin with good supporting documentation. There are also other plugins that do similar things. Try searching our community plugins library or the WordPress plugin directory.

Disclaimer: Third-party services, plugins, or code snippets that are referenced by our Support documentation or in Support Team communications are provided as suggestions only. We do not evaluate, test, or officially support third-party solutions. You are wholly responsible for determining if any suggestion given is sufficient to meet the functional, security, legal, ongoing cost, and support needs of your project.

Modifying style.css

If you are comfortable with editing and modifying cascading style sheets (CSS), then you can make custom site wide changes to how your Gravity Forms are displayed by manipulating your theme’s style.css file. We recommended this approach only for users with at least moderate CSS experience, as the interactions and complexity of style sheets can mount up quickly.

The location of the style.css file is not consistent across the many themes available. Often the theme’s style.css file is located in the in the root (or top level) of the theme folder on the web server hosting your site, but theme developers can choose to place them somewhere else within their theme’s folder structure. Check out this article (external site) for some advice on how to locate and access the theme’s CSS file.

Remember: Your first step should always be to back up the CSS file before you modify it!

We cannot really advise where to put your style additions within your style.css file, as their organization varies immensely from theme to theme. If in doubt, or your changes do not seem to be working, review any documentation that accompanies your theme, or contact your theme provider.