Tue, 2013-07-09 14:57

"Zen is a powerful, yet simple, HTML5 starting theme with a responsive, mobile-first grid design. If you are building your own standards-compliant theme, you will find it much easier to start with Zen than to start with Garland or Stark. This theme has fantastic online documentation and tons of helpful code comments in its PHP, HTML, CSS and Sass."
(Quoted from: http://www.drupal.org/project/zen/)

When I first found myself getting involved in Drupal I was constantly looking at a plethora of themes and to some individuals this can be a bit exciting... Which one should I choose?  

Well, to be short and save you the time needed to develop projects faster and at a more optimal and professional rate I recommend Zen. Zen is a responsive CSS framework developed in HTML5. Basically, it's a blank canvas with proper "starting" qualities such as div placement, collapsability, measurements and more. Zen comes filled with all the proper elements to start developing as soon as it's installed, fresh out of the box.

In the rest of this post you'll find simple yet intuitive instructions on how to install the Zen sub-theme for Drupal.

Let's get started:

To find zen, simply visit http://www.drupal.org/project/zen and download the appropriate version for your installment of Drupal.

Once you have Zen and all of it's contents, extract it somewhere comfortable where you can edit a few files before uploading it to your FTP and go inside the master Zen directory, cut the STARTERKIT folder and paste it outside of the Zen directory so it is along side it. This is our theme folder which will contain all of our edits and modifications to our framework.

The files we'll be modifying are listed as:

  • STARTERKIT(Folder)
  • STARTERKIT.info
  • template.php
  • theme-settings.php

Let's start by renaming your "STARTERKIT(FOLDER) and STARTERKIT.info" to an appropriate theme name, for the sake of this Tutorial we'll name it BSIDE.

Next, we'll open up our "template.php" and "theme-settings.php" in our favorite text editor.

Afterwards we'll do a simple search command using your text editor to "find" and "replace" the words STARTERKIT with BSIDE(or your theme name) where applicable.

Now back to the our .info file that we renamed earlier... This file is usually named "STARTERKIT.info.txt" Inside here are a load of different settings and options to enable scripts or even insert your own custom block regions. For now what we're focusing on is renaming our theme and giving it a proper description as well as removing the .txt from the file extension so that is a proper .info file and Drupal will recognize it.

Okay! We're just about finished! Let's save all of our work we've completed so far and start by uploading it into your drupal site, navigate to your /sites/all/themes folder inside your FTP directory and drop the initial STARTERKIT folder we renamed "BSIDE" (containing all of it's data files) right into it.

Once that is done, now all we have to do is enable it in Drupals backend by visiting our website and navigating to admin/appearance once there you'll find your newly created zen sub-theme ready for customization and more!

Written by