Add Custom CSS to Your Drupal 7 Site

| Drupal
How to Add Custom CSS to Drupal 7

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.

CSS Injector Drupal 7

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.
CSS Injector Drupal 7
  • Scroll down and click "Save configuration".
CSS Injector Drupal 7

Step #2. Add custom CSS

  • Go to Configuration > CSS Injector.
  • Click "Create a new rule".
CSS Injector Drupal 7
  • Enter a Title.
  • Enter your CSS code.
  • In Themes to show on, select the theme you're using.
CSS Injector Drupal 7

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).

CSS Injector Drupal 7
  • 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.

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.