Add Custom CSS to Your Drupal 7 Site

One of the common requests in our support chat and forum involves adding custom CSS to a site.

Normally the solution is to add the CSS to the theme, but many environments are locked down and the site owners don’t have access to the files.

In this post, I’m going to show you how to use the CSS Injector module to add custom CSS to your Drupal 7 site.

Step #1. Install and enable CSS Injector module

Download CSS injector module from this page.

Install the CSS injector module:

• Go to Modules.
• Click “Install new module” and upload the CSS Injector files.
• After the installation is done, click on “Enable newly added modules”.
• Look for “CSS Injector” box and check it.

• Scroll down and click “Save configuration”.

Step #2. Add custom CSS

• Go to Configuration > CSS Injector.
• Click “Create a new rule”.

• Enter a Title.
• Enter your CSS code.
• In Themes to show on, select the theme you’re using.

Add the CSS on specific pages. Use this setting to load the custom CSS on all the pages, or only on specific pages by selecting “add on only the listed pages” and typing the relative paths. For example: node/23 or some-page (no slash at the beginning).

• Click Save when you’re done

Note for Pantheon users:

There is currently a bug in Pantheon’s backup process that will skip any file or directory starting with ‘css’ including the CSS Injector files that are saved in a css_injector directory. If you are using CSS Injector 1.x on Pantheon, you will lose the actual CSS from each configuration if you restore from a backup until this issue is resolved.