Zen Installation (old)

Zen
Drupal

This iinformation has an updated Zen Installation article. It contains more up-to-date information and is more has more maintenance-friendly tips. This is only here for referral and archival purposes.

These steps seem very long only because I have laid out as much details as possible. You will find that it really looks longer than it is to do.

My Zen Specifics

downloaded from: www.drupal.org/project/zen
version: 6.x-1.0-beta3
my aim: I will be using this Zen theme on all or most of my Drupal sites

Tip: For any contributed module or theme you are thinking of using, it is always a good idea to have a look around that specific download page. Generally you will find links to documentation, log changes, and 'View all issues'. The latter especially will let you know how many bugs there are associated with it, how many have been solved, and most importantly, if the support team behind it is still actively fixing an open bugs.

Suggested Reading:

(Zen) Getting Started (6.x) from Drupal
CSS Zen Garden

Zen Pre-Installation

It is always safest to do a Backup of your home directory and all databases before installing a new module or theme.
I do it via my cPanel "Backup" functionality. There are various other ways to do this, including via PHPAdmin. For a newbie like me, my method is by far the easiest.

You will NOT be using the Zen downloaded folder and files as is. You will need to make copies of certain folders & files for each of your Drupal-sites - thereby leaving the original downloaded Zen in untouched pristine condition. And you will have to give your subZen theme a specific name.

So what you are actually doing is using the original downloaded Zen theme as a base. From this, you will be copying, renaming, and modifying to make subZen themes for each of your domains.

You should not modify any of the original CSS or PHP files that you downloaded.

(These steps are necessary for single Drupal sites or for Drupal multi-sites like mine.)

Each of your domain(s) will have to have a "themes" folder to hold its own subZen theme.

I tend to duplicate the folder/file structure on my local machine to mirror that as in my hosted account. It makes it easier for me to make changes locally and still be organized vis-a-vis my web folder/file structure.

Creating your folder structure to accommodate your subZen themes

Using the physical schema of my multiple Drupal sites from before as an illustration ...

I will need to create a "themes" folders for each of the sites.

(I will do all of this work on my local machine first and then upload everything when I am ready.)

The physical layout of my folders before Zen is as follows:

You need to create a 'themes' folder in each of the domain's folders (if it isn't there already) as follows:

Please note that for the "parent" domain, the new 'themes' folder is within the /sites/all/ folder but each of the "child" folder, it is created directly under the domain-named folder.

Needless to say, you would only do this for each of the domains for which you intend to employ Zen-themes.

I suppose I could have placed the 'themes' folder for the "parent" domain in the /sites/default/ folder - but I didn't know better then and this current setup works. The reason why you create a 'themes' folder for each of the domains is that as you tweak the styles and look of your site(s) .. you will modify underlying styles sheets, and it is more than conceivable that each domain will have different tweaks & changes to achieve different looks/colours/positioning, etc.

Now that you have your folders ready, it is time to do some Zen-installing!

Zen Installation

Strictly speaking, you are not installing the original Zen theme. Rather you are creating a subZen theme that is specific for each of your domains.

download the Zen theme to your local machine and extract it
==> you will get one folder 'zen' (which has subfolders etc.)
read the 'Readme.txt' that comes with it. It will have detailed instructions on setup.
I have included the steps below, as pertaining to my Drupal-sites setup and needs. It will still show you the general steps.
The extracted Zen has a single 'zen' folder which contains some files and the following sub-folders:
* STARTERKIT
* zen
* zen_classic

Copy the entire 'zen' folder into each of the 'themes' folder you just created for your domains.

Your all important 'zen' folder should now be:
for the "parent" domain folders: /sites/all/themes/zen
for each "child" domain folders: /sites/(domainname)/themes/zen

From hereon in, the steps below will apply to each of your domains.

Copy and Rename the 'STARTERKIT' folder

You will be using the /STARTERKIT/ folder that came with the extracted Zen as your starting base. Make a copy of this folder, and paste that into each of your 'themes' folder.
In your 'themes' folder, rename this (copied) folder.
As each of your domains will be using its own subZen theme - you will be naming your own subZen theme. Rename the (copied) folder to whatever you want your domain-specific subZen theme-name to be.
(This name you give will be what you will later see in your Drupal administrative area:
Administer > Site Building > Themes)

For example, for my
("parent") domain "S2" (or s2.com), the subZen theme folder is named: "s2zen"
for ("child) domain "NW" (or nw.com), the subZen theme folder is name "nwzen"
.. and so on.

Only use lowercase and underscores in your subZen theme name (i.e. folder name)

Rename the STARTERKIT.info file

In your subZen theme folder, find the file 'STARTERKIT.info'.
Rename this to (subZenThemeName).info
For example, my "NW" (i.e. nw.com) domain has, as per above, "nwzen" as its subZen theme name.
So the name of its .info file will be:
nwzen.info (as in /sites/nw.com/themes/zen/nwzen/nwzen.info)

In your .info file - Find and Replace

Open the '(subZenThemeName).info file.
Find every instance of 'STARTERKIT' and replace it with the name of your subtheme (for my "NW" site, that would be "nwzen")

There should be 2 occurrences.

Change 'name' and 'description' files in your .info file

While still in the same file, find the line:
'name = Zen Themer's Starter Kit'
and change this to:
'name = (subZenThemeName) (for my "NW" site, that would be "name = nwzen")

Then find the line:
'description = Read the >a href="http://drupal.org/node/226507">online docs</a> on how to create a sub-theme'
and change this to:
'description = A Zen sub-theme'

Copy over the needed StyleSheets files
You will be looking for these files from the /zen/zen/ folder.

Your own subZenTheme css file
First look for /zen/zen/zen.css

Copy this file and paste into your /(subZenThemeName)/ folder.
Rename it to "(subZenThemeName).css"

(So for my "NW" domain, I would have:
/sites/nw.com/themes/nwzen/nwzen.css)

Layout style sheets
Decide if you want a 'liquid' or a 'fixed' layout. (I chose 'liquid' so I will just use that as illustration purposes below. The steps will be similar if you choose 'fixed' layout)

From the /zen/zen/ folder, copy the 'layout-liquid.css' file and place it into your subZenTheme folder.
Rename it to 'layout.css'.

(So for my "NW", I will now have:
/sites/nw.com/themes/nwzen/layout.css)

Additional StyleSheet: the html-elements.css file
This specific step was not included in the Readme.txt instructions that came with the Zen theme. I have included this as I find I need to refer to and change some styling on basic HTML elements for the look I want on my site(s).

To be able to do this, you need to get a copy of the html-elements.css and put it into my subZenTheme folder.

Copy the 'html-elements.css' file from the /zen/zen/ folder and paste in into my subZenTheme folder.

(So for my "NW" site, I now have:
/sites/nw.com/themes/zen/nwzen/html-elements.css )

There is one additional step to let the system know that you want to use this copy of html-elements.css. In your domain-theme's .info file, that specific html-elements.css file must be recognized/enabled.

Open your '(subZenThemeName).info file (from the steps above)
Approximately around line 28, you will find:
;stylesheets[all][] = html-elements.css

All you need is to uncommented that line - i.e. remove the leading ";" character.
Save the file.

Edit your 'template.php' and 'theme-settings.php' files
Inside each of your subZenTheme folder, you will find these 2 files.

For each of these files, open it and Find every occurrence of the text 'STARTERKIT' and replace it with the name of your subtheme. (Once again, for my "NW" site, it would replacing with "nwzen")

FYI:
* template.php file has 10 occurrences
* theme-settings.php has 4 occurrences.

Upload

You are now ready to upload each domain's /zen/ folder into each domain's /themes/ folder on your web server.
Remember that your "parent" domain's /zen/ folder will be going into the corresponding "parent"-domain folder so that you end up with:
/sites/all/themes/zen/

Okay, once that is done, you should be able to go to your Drupal (admin section) and be able to see and enable your Zen themes.

You might find, as I did, when you try to upload, that you might not be able to put the folder into certain folders on your web-server.

For example, I could not put anything into my /sites/(domain.com)/

It has to do with the folder/file permission on the web-server.
Right-click the name of the folder (that has insufficient write permission),
note the current CHMOD permission settings, and then ...
change the CHMOD permission to 755.
After you have copied your folder into the right places, reverse the CHMOD permission back to whatever it was.