Importing a Custom Style Sheet using Zen Sub Themes in Drupal 7

Spent all weekend up to my elbows in Drupal. I am working on a new extension to rabbitmovers.com and a redesign of my friend’s band site.

I am using Drupal because of its flexibility: mainly the ability to create custom user roles and content types. This means the end-user (the client) only has access to the content they need to create, change, or delete. They won’t get lost in layer after layer of admin menus. They won’t accidentally change a setting rendering the site unreadable.

It’s brilliant.

But hell on wheels to learn.

The main issue I am facing is theming. I am working with a custom zen sub-theme, and there are over 25 different style sheets. This makes implementing changes a nightmare. That is, until I learned how to modify the .info file to import a custom style sheet.

And here’s how(Using Drupal 7)…

  1. Open the *theme*.info file, where *theme* is replaced by the name of the custom sub-theme file you set up while installing the zen custom theme. This will be located in sites/all/themes/*name of custom theme*/
  2. Open new .css file and save it to sites/all/themes/*name of custom theme*/css/ (remember what you name it).
  3. Find the list of existing style sheets (in Zen, they start at line 36), and append ‘stylesheets[all][]        = css/*custom*.css’ where *custom is replaced by whatever you are naming your custom style sheet*.
  4. In the admin interface, be sure to uncheck ‘Aggregate and compress CSS files’. You will find this at ‘admin/config/development/performance’ in the ‘Bandwidth Optimization’ sub section. (It was unchecked by default in my install, but just make certain)
  5. Click ‘Save Configuration’ button at the bottom of the page (Not necessary if you did not need to make changes).
  6. Click the ‘Clear Caches’ button at the top of the page. The page will refresh. Do it again.
  7. Add your custom CSS to the style sheet you set up in step 2: I recommend using a page inspector to highlight the exact elements you are trying to modify (Chrome has one integrated into the browser, simply right click and choose ‘Inspect Element’).

And there you have it. Style at will.

This entry was posted in drupal, iam[andyou'rewelcome]. Bookmark the permalink.