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.
Why not just use a local.css file?
@bazingawebdesign We’ve often come across situations where large organizations don’t allow their staff file access. This is an easy workaround.
if even the modules we cant access..to install anything
how to import external css…from another host maybe..
im just want to play with some text effect on the body..
would be nice if i could call some custom css..
That is more of a theming question you can include style overrides by subtheming. And configuring the theme to allow extra css files.
Where(path) the css files (created using rules) gets stored on server ?
Thanks so much! This is such a great quick solution done the Drupal way! kudos