IMPORTANT: In Drupal 6, the theme system caches template files and which theme functions should be called. What that means is if you add a new theme or preprocess function to your template.php file or add a new template (.tpl.php) file to your sub-theme, you will need to rebuild the "theme registry." See the Theming Guide

Drupal 6 also stores a cache of the data in .info files. If you modify any lines in your sub-theme's .info file, you MUST refresh Drupal 6's cache by simply visiting the admin/build/themes page.

The base Zen theme is designed to be easily extended by its sub-themes. You shouldn't modify any of the CSS or PHP files in the zen/ folder; but instead you should create a sub-theme of zen which is located in a folder outside of the root zen/ folder. The examples below assume zen and your sub-theme will be installed in sites/all/themes/, but any valid theme directory is acceptable (read the sites/default/default.settings.php for more info.)

Why? To learn why you shouldn't modify any of the files in the zen/ folder, see Why use Zen?

  1. Copy the STARTERKIT folder out of the zen/ folder and rename it to be your new sub-theme. IMPORTANT: Only lowercase letters and underscores should be used for the name of your sub-theme.

    For example, copy the sites/all/themes/zen/STARTERKIT folder and rename it as sites/all/themes/foo.

    Why? Each theme should reside in its own folder. Unlike in Drupal 5, sub-themes can (and should) reside in a folder separate from their base theme.
  2. In your new sub-theme folder, rename the STARTERKIT.info.txt file to include the name of your new sub-theme and remove the ".txt" extension. Then edit the .info file by changing any occurrence of STARTERKIT with the name of your sub-theme and editing the name and description field.

    For example, rename the foo/STARTERKIT.info.txt file to foo/foo.info. Edit the foo.info file and change "STARTERKIT.css" to "foo.css", change "name = Zen Sub-theme Starter Kit" to "name = Foo", and change "description = Read..." to "description = A Zen sub-theme".

    Why? The .info file describes the basic things about your theme: its name, description, features, template regions, CSS files, and JavaScript files. See the Drupal 6 Theme Guide for more info.

    Then, visit your site's admin/build/themes to refresh Drupal 6's cache of .info file data.

  3. If you want a liquid layout for your theme, copy the layout-liquid.css from the zen/zen folder and place it in your sub-theme's folder. If you want a fixed-width layout for your theme, copy the layout-fixed.css from the zen/zen folder and place it in your sub-theme's folder. Rename the layout stylesheet to "layout.css".

    For example, copy zen/zen/layout-fixed.css and rename it as foo/layout.css. Note that the .info file already has an entry for your layout.css file.

    Why? In Drupal 6 theming, if you want to modify a stylesheet included by the base theme or by a module, you should copy the stylesheet from the base theme or module's directory to your sub-theme's directory and then add the stylesheet to your .info file. See the Drupal 6 Theme Guide for more info.
  4. Copy the zen stylesheet from the zen folder and place it in your sub-theme's folder. Rename it to be the name of your sub-theme.

    For example, copy zen/zen/zen.css and rename it as foo/foo.css. Note that the .info file already has an entry for your foo.css file and that your .info file removes the base theme's zen.css file.

  5. Copy the print stylesheet from the zen folder and place it in your sub-theme's folder.

    For example, copy zen/zen/print.css to foo/print.css. Note that the .info file already has an entry for your print.css file.

  6. Copy the html-elements stylesheet from the zen folder and place it in your sub-theme's folder.

    For example, copy zen/zen/html-elements.css to foo/html-elements.css. Note that the .info file already has an entry for your html-elements.css file.

  7. Edit the template.php and theme-settings.php files in your sub-theme's folder; replace ALL occurrences of "STARTERKIT" with the name of your sub-theme.

    For example, edit foo/template.php and foo/theme-settings.php and replace "STARTERKIT" with "foo".

  8. Log in as an administrator on your Drupal site and go to Administer > Site building > Themes (admin/build/themes) and enable your new sub-theme.

    Optional:

  9. Modifying Zen core stylesheets: If you decide you want to modify any of the other stylesheets in the zen folder, copy them to your sub-theme's folder before making any changes. Also, be sure the new stylesheet is included in your .info file and that you have rebuilt the theme registry.

    For example, copy zen/zen/block-editing.css to foo/block-editing.css. Then edit foo/foo.info and uncomment this line to activate it:
    ;stylesheets[all][] = block-editing.css
    to:
    stylesheets[all][] = block-editing.css
    Then, visit your site's admin/build/themes to refresh Drupal 6's cache of .info file data.

  10. Modifying Zen core template files: If you decide you want to modify any of the .tpl.php template files in the zen folder, copy them to your sub-theme's folder before making any changes. And then rebuild the theme registry.

    For example, copy zen/zen/page.tpl.php to foo/page.tpl.php.

  11. Themeing Drupal’s search form: Copy the search-theme-form.tpl.php template file from the modules/search/ folder and place it in your sub-theme's folder. And then rebuild the theme registry.
    Why? In Drupal 6 theming, if you want to modify a template included by a module, you should copy the template file from the module's directory to your sub-theme's directory and then rebuild the theme registry. See the Drupal 6 Theme Guide for more info.
  12. Further extensions of your sub-theme: Discover further ways to extend your sub-theme by reading Drupal 6's Theme Guide online.

Comments

djmmuir’s picture

If you work in Windows and host on Unix/Linux, it is really important to use standard Unix-aware FTP and editor applications.

Ensure that your editor maintains the file format in Unix/Linux (for linebreaks) and UTF-8 for character encoding. If you aren't careful about this, you will start to see the following error:
* warning: Invalid argument supplied for foreach() in /home/user/public_html/includes/theme.inc on line 463.
* warning: Invalid argument supplied for foreach() in /home/user/public_html/includes/theme.inc on line 468.

A great combination is NotePad++ and WS FTP Pro.

If you choose this combination of programs, here are a few minor hints:

  • set WS FTP Pro to use NotePad++ as its "Active Editor" for the file types you want (I set it for all file types)
  • set NotePad++ preferences so it doesn't restore sessions (this allows you to have WS FTP talk directly to NotePad++... downloading, opening the editor, sensing that the file is updated and the editor closed, and uploading the modified file)
  • set NotePad++ Format to Unix and UTF-8 with BOM (I check this for every single file I edit since a change to these files can happen almost any time one of the files lands on a Windows system)
Dash’s picture

Lines 463 and 468 in theme.inc refer to the styles and scripts called by your .info file (or any other styles called).

I had this problem when I'd just added nifty Corners to my test theme, re-encoded the .js and .css files as above and it's all fixed!

Thanks!

hyperzmart’s picture

the error(s) starting with;
"* warning: Invalid argument supplied for foreach() in"
- is something i get from time to time when testing new contributed modules.

found it interesting that UTF-8 may be an issue between UNIX and Windows and think this could then occur just about anywhere in any system as long as the files are Windowsed incompatible to UNIX.

how likely is it that some errors like this occur because module contributors distributes files that carry this problem around along the spread-outs of their files?

could this possibly be an issue to be centrally addressed and managed through out the whole community of everything D?

/dreaming of D10:)

Zelka’s picture

"Turn off CSS and Javascript file optimization before continuing. Visit admin/settings/performance and disable "Optimize CSS files" and "Optimize Javascript files"."

It is actually under Admin - Site Configuration - Performance, I don't mean to be extra picky, but it took me (a newbie) quite a while to figure it out, so I thought I might help the other newbies.

Thanks for your time.

Regards,

Zelka

jenlampton’s picture

admin/settings/performance is the path (the end of your URL) of the page you land on when you navigate: Admin > Site configuration > Performance.

They are one and the same, you can navigate there, or cut / paste in the path.

Jen

palminas’s picture

I have followed these directions to the letter. I have installed other themes, which work fine. Zen shows up fine. I have done this entire process three times, followed the directions perfectly.

Quite simply? It doesn't work. The theme doesn't show up.

It is in the right place, I know that because the other themes there show up just fine and work perfectly. (sites/all/themes)

Steps 1-8 were all done perfectly. Step 9 can't happen because the theme doesn't show up.

***EDIT***

Oh, wait. Yeah, it does. It is poorly worded in step 3. This line:

"In your new sub-theme folder, rename the STARTERKIT.info.txt file to include the name of your new sub-theme."

Should actually be:

"In your new sub-theme folder, rename the STARTERKIT.info.txt file to include the name of your new sub-theme and delete the .txt from the end. For example, STARTERKIT.info.txt becomes foo.info"

To rename a file implies that you are leaving the extension the same.

jwo’s picture

Dude,

Just like to thank you for your comment... was about to redo all the steps again.

You saved me a lot of time and hair.

Jenny

melinhead’s picture

Palminas - THANK YOU for your post. Removing the ".txt" was the missing piece of the puzzle. I spent two hours tearing my hair out over this. You rock.

rodrigo7x’s picture

Hi,

I followed this tutorial but could not get it to work. I renamed the STARTERKIT.info.txt to foo.info as stated above but just doing this doesn't get rid of the .txt extension, if you do it on the desktop. You have to do it from terminal. I am using Mac Os X 10.5.8 and that's the only way it worked for me. In case anyone wants to try it just open up terminal us the cd command to find the foo directory you created and use the mv STARTERKIT.info.txt foo.info command just like that so you can properly rename that file.

PaulyB’s picture

I ran into the same trouble on the Mac. When you remove the .txt through the Finder, the file is still actually identified as a txt. You can rename the file in Terminal as suggested by rodrigo7x. Or in Finder you can right-click the file, choose "Get Info" and under the "Name & Extension" section, delete the .txt. Confirm that you want to change the extension on the popup that appears.

composer_v’s picture

Thank you for clarification!

comparellc’s picture

Don't even compare D to the J word!! I wasted almost 2 years of my life with that piece!

foerlorareh’s picture

I'm new to Drupal.

When I activate my Zen sub-theme, the navigation menu and everything else in the sidebars disappears. Why does this happen?
I can't find them in the Block-settings either.

I can't find any reasonable explanation why this happens. The sick part is that no one seems to have the same problem.

Please, help!

OmarQot’s picture

I have the same problem, Are you able to find the trick?

Thanks,

OmarQot’s picture

Just repeated the steps again and fixed. don't know why.

galatee33’s picture

Got the same problem too. I repeated the same steps but changed the theme's name and everything suddenly went fine ! I hope this can help you.

niteshade’s picture

I'm new here too, but it seems that with the custom zen theme, the sidebars are styled to the bottom of the page for SEO.

You probably already know this, but thought I'd clarify... maybe your problem is something else altogether, though.

Kimistang’s picture

I tried uploading and installing the tokens to install the ecommerce and got:

warning: unlink(css/tabs.css) [function.unlink]: Permission denied in /var/www/vhosts/yours-by-design.com/httpdocs/includes/file.inc on line 459.
warning: unlink(css/winxp.blue.css) [function.unlink]: Permission denied in /var/www/vhosts/yours-by-design.com/httpdocs/includes/file.inc on line 459.
warning: unlink(css/style.css) [function.unlink]: Permission denied in /var/www/vhosts/yours-by-design.com/httpdocs/includes/file.inc on line 459.

gave up on that and ended up getting the same thing when I tried to install the Zen.... then everything went psycho all over the page! UGGH!! this is harder than I thought! At least with Joomla I could understand the errors and the easy to understand dev website.. this place is pure confusion!

harcher’s picture

Make sure you read the instructions that are included with the theme:
sites/all/themes/zen/STARTERKIT/README.txt

JayNL’s picture

since the update of Zen, the whole story here is just not true anymore. layout-fixed and layout-liquid.css are no longer in the folders mentioned for example. Please update the documentation of Zen, or perhaps I can?

kbrinner’s picture

Maybe this is not your problem, but I had the same issue at first until I noticed I had downloaded the 6.x 2.0 version of the Zen theme but was reading the 6.x 1.0 documentation - see http://drupal.org/node/629510 for the 6.x 2.0 Zen sub-theme docs.

JayNL’s picture

I found that out now as well :) Thnx!

webjakob’s picture

The problem is that the zen.info file in Zen 2.0 still contains a link to this old 1.0 documentation, and that is a bug.

That is why I - and probably others - are lead to this wrong place. Before I found out about this error, I was having a somewhat ironic feeling that the documentation for a project that is being touted as extremely well documented, was so obviously wrong.

And that is a shame. Someone should simply fix the wrong link in the zen.info file.

wkoplitz’s picture

This is a really easy fix to make in the code and commit.
This one line of code had me pulling my hair out for an hour.

girishmuraly’s picture

If you need to theme a specific block by creating block--delta.tpl.php, then apparently you need to first copy over the block.tpl.php file from the parent theme's template folder to your sub-theme's template/ folder if you already have not.

NickWebman’s picture

i love you!

Anonymous’s picture

The information here differs from the readme.txt file included when you download Zen (1.8.2.1). The instructions here seem out of date.

UPDATE : Sorry, my bad. Didn't realize this was for version 6.1.