I have Drupal 7.14 and Zen 7.x-5.1. I cannot figure out how to simply change the background color. I have tried placing background: red; in several of the css pages but have had no luck.

  • Have you tried body {background: red;}? – Clive Jun 18 '12 at 21:28
  • Yes, is there a specific page I would need to include this? Would I have to change anything in the .info file? I am VERY new to Drupal. – Raymond Jun 18 '12 at 21:30
  • Do I need to link the css pages of my subtheme in the template.php file? – Raymond Jun 18 '12 at 21:32
  • If you've copied the starter kit the css will already be in the .info file, if not you'll need to add the css in the .info file, not template.php. Something like stylesheets[all][] = css/style.css. Then you'll need to flush Drupal's caches for the changes to get picked up – Clive Jun 18 '12 at 21:34
  • That did it, the stylesheets I was changing were in there but didn't work, so I just added stylesheets[all][] = css/style.css to the .info file and created a stylesheet called style.css – Raymond Jun 18 '12 at 21:39

The Zen theme uses many different CSS files. You need to create a subtheme for Zen and then you are supposed to choose which layout you want. Fixed or Liquid.

Within the subtheme there are many CSS files. Depending on your choice of Fixed or Liquid you have to edit that css file...

layout-liquid.css or layout-fixed.css

Within that file you can change the parameters you are trying to override. As long as you don't have css files aggregated in the performance settings you do not need to clear the caches, otherwise you do.

To create a Zen subtheme you need to follow a tutorial: http://drupal.org/documentation/theme/zen

I recommend going through that completely and reading and learning as much about Zen as possible. One thing to know is that you never want to alter the core files of Zen, you only want to override them in your own subtheme.

Lastly, adding your own custom CSS file can be useful, but for this situation it would not be recommended because there are already CSS declarations for your use. I use a custom Zen subtheme for this site: https://www.fdanconia.com/ - I love the Zen theme structure and once you learn where everything is and how to override everything is a great theme to use.


Try to use Firebug and see if what CSS file you need to update to. The usual file is pages.css. Also see if the css is overridden (usually in strike-through).

You can try to use important if you are suspecting some css is overriding your css rule.

body {
  background: red !important;

I found that if you go into the Configuration -> Development -> Performance and disable bandwidth optimization and clear the cache it will reload the new css changes.


normalize.css line 121

background: url("localhost/zen/sites/all/themes/sub/images/bg.png") repeat scroll 0 0 #FFFFFF;

First make sure in which file you need to make css changes.

Just go to Appearance > Settings links in Zen theme Now choose css that you are choosing

  1. Fixed layout (layout-fixed.css)

  2. Liquid layout (layout-liquid.css)

You can make the css changes in the file that you have chosen from this option.

Also still you need to firebug it to check which line you have to override for background change.

Hope it will help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.