Changing CSS in Zen Theme in Drupal 7

Question

This is another question that I am sure is very simple. I've been working through tutorials on setting up a Drupal site from scratch with the Zen Theme. I have my Sub-Theme working just fine, thanks to https://drupal.org/node/1549668 and http://drupalonlinetraining.com/youtube/linwclark/drupal-7-basic-theming-zen-and-css

Now, I want to edit the CSS. Unfortunately, the documentation that I can find references 25 separate stylesheets (including both of these tutorials and this page.) The version I have, however, has far fewer sheets than that (13 according to the ReadMe).

I did find the ReadMe that describes the new stylesheets, but as this is my first foray into CSS within Drupal, I'm still a little unsure as to where I should start to add styles. Is it in normalize.css? Is this where I would add, for instance, a background image?

Thanks for any help, and/or for pointing me to a tutorial that breaks it down for the latest version of the Zen Theme!

Answer 1

You should just focus on several main Zen css files:

• blocks.css : should add the css of blocks that you create from backend or from your modules.
• forms.css: should add the css for forms: for example: login form, register form, contact form (from contact module)
• pages.css: should add the css for the pages: static page that you create from Drupal backend or views page..
• nodes.css: should add the css for just the common structure of node and specific nodes also
• tabs.css: should add for the tab style (You can easy see the tab style at user login page with login/register/forgot password).

For Zen theme. I suggest you should understand SASS structure and change the scss files instead of css files and the name of scss files are the same as the list above (like blocks.scss, pages.scss, nodes.scss, tabs.scss). You should check Getting started with Drupal7, Zen, Sass and Compass for doing your current stylesheet.