A common request of Give users is how to customize the look and feel of their Give forms. Because Give form styles are kept to a minimum they are relatively easy to apply a fully customized look to. Fortunately, adding custom CSS to your WordPress website is now fairly straightforward.
Over the years of WordPress development, there was no single way to add custom CSS to your site. This led to a lot of bad practices. Here are a few of the problematic solutions that were used in the past:
Problem #1: Add it to your theme’s style.css file
If you add custom CSS styles into your parent theme’s style.css file, you’ll lose those changes the next time your theme author pushes out an update of that theme. Theme updates can be more rare than plugin updates, but it’s not worth the risk since theme updates can be security-related.
Even if your theme has a custom CSS field for adding these styles, they are sometimes loaded before a plugin’s styles which means the plugin styles will get the priority. This is why some plugin author’s tell you to add `!important` at the end of your custom CSS style rules (not a good practice).
Problem #2: Add it to your plugin’s stylesheet
Because adding to the theme stylesheet results in the plugins overriding them, some resort to adding the custom CSS styles directly to the plugin’s stylesheets. This is the same problem as adding to your theme stylesheet: the plugin will update and you’ll lose your changes, or there are other plugins that are loaded after your styles that override the style on that particular plugin.
Problem #3: What in the world is “Enqueuing”?
If you ask a developer how to apply custom CSS styles they’ll probably tell you to enqueue a new stylesheet with a late priority in a custom functionality plugin. Did you follow that? Don’t worry, 95% of all WordPress users don’t follow it either. You shouldn’t need to worry about those things to apply simple styles to your website.
Applying simple styles to your website is relatively easy as long as you know where to look.
The Best Way to Customize your Give Styles
We recommend all Give users use the Customizer for styling Give forms. It has several benefits that we really like:
- Your styles won’t be lost during theme or plugin updates.
- Your styles will always be applied correctly.
- When you’re looking at a Give form in the Customizer, you can see your changes applied live (See screencast below).
You can find the Customizer in “WP-Admin > Appearance > Customize > Additional CSS”.
See our screencast here for an example:
What if my Customizer is Disabled?
Sometimes the Customizer has been disabled on a website, or some themes disable the Customizer’s additional CSS module. If you don’t see the “Customize” sub-menu item, or if there’s no spot to add additional CSS, we recommend using one of the following plugin options instead:
- Simple CSS — This works great and has a dedicated settings page so that you know it will be available for you. The downside is you won’t see your new styles live, you’ll have to add them, then preview your live site.
- WP Add Custom CSS — This also has a dedicated settings page, but it additionally adds a Custom CSS section to every page and post on your site. This is useful when you want your custom CSS applied only to that individual page or post. This applies to the single Give form pages as well.