in this article we will take a quick look at how to set up your Gravity Forms stylesheet for writing custom CSS in a way that lets you update Gravity Forms without worrying about over-writing your custom styles.
In order to create a custom style for Gravity Forms, first we need to locate the default stylesheet that comes with the plugin. You can find it in the following directory:
Make a copy of the above CSS file and upload it to your theme directory. You should now now have a copy here:
This is done so that we can make changes to the forms.css file and they will not get over-written with an update to the Gravity Forms plugin. If you simply modify the default CSS file and keep it in the default location, then your changes will be lost when the plugin inevitably gets updated, because the default forms.css file is replaced when the plugin is updated.
Next, we will need to call that stylesheet in our theme’s header.php file. To do this, open your themes header.php file and add the following line between the <head> tags:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/forms.css" />
This will load our new CSS file right alongside your themes default style.css file.
Finally, we need to go into the Gravity Forms options and turn off the option to output CSS, so that only the styles from our new stylesheet are used. Log into WordPress admin and go to Forms –> Settings and set “Output CSS” to no.
Now we can modify the forms.css file within our theme directory to give Gravity Forms a custom style without the risk of losing our work when an update is made to the plugin.
Next we will look at modifying the forms.css file to give Gravity Forms elements a custom style.