Add Custom CSS to Your Drupal 7 Site

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.

Instructor

  • Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Subscribe
Notify of
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Bazinga! Web Design

Why not just use a local.css file?

steve

@bazingawebdesign We’ve often come across situations where large organizations don’t allow their staff file access. This is an easy workaround.

kuyiekrafty

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

thanks.

daniel-pickering

Hi Kuyiekrafty
That is more of a theming question you can include style overrides by subtheming. And configuring the theme to allow extra css files.

Bhushan

Where(path) the css files (created using rules) gets stored on server ?

Davido

Thanks so much! This is such a great quick solution done the Drupal way! kudos

6
0
Would love your thoughts, please comment.x
()
x