Wednesday, 8 May 2013

Install Drupal Zen Theme

Now that I've installed Drupal, I decided to install the most popular and 'award winning' theme. That is Zen.  This is how you get Zen and get Zen working for you.

This post describes how Zen was installed on a Cloud Server from togglebox with CentOS Release 6.4 (cat /etc/centos-release) and Drupal 7 installed and working.  It is assumed that the root user will be used for all commands and that sudo will not be required prepended to any commands.

Install Sass and Compass

Sass adds features to standard CSS used by Zen.  You can write your stylesheets in Sass. Compass is a helper library that converts stylesheets written in Sass to CSS and includes a number of other extensions.
yum install rubygems
gem update
gem install sass
gem install compass

There are some complexities behind why Sass and Compass are needed that are expected to become clear when developing a site under the Zen theme - this Drupal Docs page has some information that seems important.

Download Zen

The Drupal site has a page about Zen including recommended downloads - this post assumes Zen version 7.x-5.1.  Download it to your computer.

FTP it to your server

Transfer the zen-7.x-5.1.tar.gz file (or whatever) you just downloaded into /var/www/html/sites/all/themes/.  I used my preferred FTP client CyberDuck on the Mac to open a SFTP connection with the root user/password.

Install Zen

SSH to your server (since we're assuming it's a cloud server)
Navigate to /var/www/html/sites/all/themes/
Unpack the tar.gz with tar -xzvf <filename>.tar.gz
Logging into one of your Drupal sites will now include the Zen theme in the Adminstration -> Appearance menu.  If you would like to see it in action make it the default theme.  Before you start using it in action it is recommended that you create a sub-theme to protect the original from any changes you make to the code and make maintenance and upgrade easier.

Create a Zen sub-theme

Copy the STARTERKIT folder to a separate folder at the same level as zen/
cd /var/www/html/sites/all/themes
cp -r zen/STARTERKIT sub-zen

Edit template.php and theme-settings.php to replace STARTERKIT with sub-zen (the sub-theme name) where it is used in function names.  If using the nano editor, Ctrl-W is search and Ctrl-\ is search and replace which asks for confirmation for each replacement.

After following these instructions the new sub-theme would not appear on the Administration -> Appearance page in Drupal.  This was because of the hyphen in the name.  The README.txt in the sub-theme folder states that sub-theme names must begin with an alphabetic character and contain only lowercase letter, numbers and underscores.  Making the same changes as above to sub_zen.info, template.php and theme-settings.php and returning to the Appearance page revealed a working sub-theme.