HOWTO Create Zen 7.x-3.x Subtheme in Step-by-step

This is the Part 1 of the HOWTO, and you should interested with:

You may hope to stylize your Drupal 7.x blog by yourself; you may have a eyes-catching open source design and would like to implement as Drupal 7.x theme; you may hope to contribute something to Drupal community. Yes, you may have a lot of reason to start your own Drupal theme development.

But the next question: how to start the work without a huge knowledge background? Therefore this is the showtime of Zen (http://drupal.org/project/zen). Zen is a starting theme for Drupal, which abstract a lot of pre-required Drupal background knowledge for new comer, and even give a big hand to expert Drupal theme developer. For example, I can use Zen to upgrade all of my legacy Drupal public theme contribution within 2 weeks, including both Drupal 6 and 7 version among all 5 themes!

This HOWTO will give you a quick review and step-by-step guide, building your own Zen 7.x-3.x subtheme with the help of GIT. Sounds interesting? So let's start :D

Before Start

Before start you should prepare your development environment with some required tools and setup.

Install a new Drupal 7.x core within your web server. I will assume you have this already, and so excluded within this HOWTO. Let's call the Drupal document root as $DRUPAL_ROOT.

Next you should have GIT installed within your Linux. In case of Debian, just simply type "apt-get update && apt-get install git-core" and you will have it.

Now go to your $DRUPAL_ROOT/sites/all/themes and run the following command, to fetch the latest zen-7.x-3.x from GIT:

git clone --branch 7.x-3.x http://git.drupal.org/project/zen.git

Get the script "subtheme-creator" from http://drupal.org/node/336368, and save it as $DRUPAL_ROOT/sites/all/themes/subtheme-creator.

We will use the design from Contented5 (http://pantarei-design.com/~hswong3i/themes/Contented51.zip). Download it to somewhere else which your browser can access it (e.g. http://edin.no-ip.com/~hswong3i/themes/Contented5/), Let's call it $CONTENTED5_RAW.

Don't forget to checkout my Contented7 reference code from GIT (http://drupal.org/node/68243/git-instructions/7.x-3.x):

cd $DRUPAL_ROOT/sites/all/themes/
git clone --branch 7.x-3.x http://git.drupal.org/project/contented7.git
cd contented7
git branch -a
git checkout -b 7.x-3.x-STARTERKIT refs/remotes/origin/7.x-3.x-STARTERKIT
git checkout 7.x-3.x

Get the different between original zen-7.x-3.x STARTERKIT with my changes as reference:

git diff 7.x-3.x-STARTERKIT 7.x-3.x > ../contented7-7.x-3.x-CHANGES.diff

(OPTIONAL) You may also hope to install ThemeKey (http://drupal.org/project/themekey) to assist your theme development, so will not break your existing website look and feel. You may reference with my setup:

Setup your new subtheme from Zen STARTERKIT with some basic changes

You can now create your new subtheme folder for development. Just name it as "Contented5" and setup as "Fixed width" layout (we will hack it soon):

cd $DRUPAL_ROOT/sites/all/themes/
bash subtheme-creator

We would like to assist our development with GIT so now let's initialize it:

cd $DRUPAL_ROOT/sites/all/themes/contented5
git init
git add *
git status
git commit -a -m '- new zen-7.x-3.x subtheme initialized from STARTERKIT.'
git log

Let's create a branch for our STARTERKIT so we can reference changes to it simply:

git checkout -b 7.x-3.x-STARTERKIT

Here is a quick checklist that I usually make changes to STARTERKIT before actual development and design clone:

  • Remove images-source/ folder.
  • Copy $DRUPAL_ROOT/sites/all/themes/zen/STARERKIT/css/layout-liquid* to $DRUPAL_ROOT/sites/all/themes/contented5/css/, also clone as layout-fluid*.
  • Copy $DRUPAL_ROOT/sites/all/themes/zen/templates/page.tpl.php to $DRUPAL_ROOT/sites/all/themes/contented5/templates/
  • Copy $DRUPAL_ROOT/sites/all/themes/zen/templates/region.tpl.php to $DRUPAL_ROOT/sites/all/themes/contented5/templates/
  • Copy and rename $DRUPAL_ROOT/sites/all/themes/zen/templates/region--sidebar.tpl.php to $DRUPAL_ROOT/sites/all/themes/contented5/templates/ as region--footer.tpl.php and region--triptych.tpl.php
  • Copy $DRUPAL_ROOT/sites/all/themes/contened7/images/* to $DRUPAL_ROOT/sites/all/themes/contented5/images/

Commit our changes as reference:

git add *
git commit -a -m '- base reference before 7.x-3.x changes.'

Go to admin/appearance from browser and enable your new theme, now it should look like as below:

Start with some basic hack

We have the branch 7.x-3.x-STARERKIT as reference, so we will also need to create a real working branch, e.g. 7.x-3.x:

git checkout -b 7.x-3.x
git branch

OK another quick checklist about my changes:

  • Copy $DRUPAL_ROOT/sites/all/themes/contented7/css/candy* to $DRUPAL_ROOT/sites/all/themes/contented5/css/
  • Copy $DRUPAL_ROOT/sites/all/themes/contented7/css/custom.css.txt to $DRUPAL_ROOT/sites/all/themes/contented5/css/
  • Reference to contented7-7.x-3.x-CHANGES.diff, update contented5.info
  • Reference to contented7-7.x-3.x-CHANGES.diff, update template.php
  • Reference to contented7-7.x-3.x-CHANGES.diff, update theme-settings.php
  • Reference to contented7-7.x-3.x-CHANGES.diff, update templates/* (e.g. copy page.tpl.php before customization)
  • Reference to contented7-7.x-3.x-CHANGES.diff, update css/layout-* (shortcut: copy and paste layout-fixed.css before customization)

(CHECK POINT) commit changes and check with 7.x-3.x-STARTERKIT, also compare and reference with contented7-7.x-3.x-CHANGES.diff:

git add *
git commit -a -m '- after initial changes and update css/layout-fix.css.'
git diff 7.x-3.x-STARTERKIT 7.x-3.x | colordiff | less -R

Let's check the layout again, which should look like as below:

Start your design clone

We will start with css/html-reset.css, most likely about font size, link color, etc. You may also reference with contented7-7.x-3.x-CHANGES.diff. usually you will need to add something missed, e.g. a:visited.

(CHECK POINT) commit changes and check with 7.x-3.x-STARTERKIT, also compare and reference with contented7-7.x-3.x-CHANGES.diff:

git add *
git commit -a -m '- after initial changes and update css/html-reset.css.'
git diff 7.x-3.x-STARTERKIT 7.x-3.x | colordiff | less -R

Let's check the layout again, which should look like as below (http://edin.no-ip.com/?themekey=contented5):

What's next?

You should have a basic setup of your new theme development now. So the next target would be cloning the remaining style from original design.

Also keep in mind that most open source design are NOT target for CMS usage, which means usually it will miss out something that looks important in Drupal 7.x Zen 3.x development. My best practice is: DON'T clone everything BLINDLY! You should have your own changes, you should have your own styling, that's often. If you get lost about next step, please reference with my contented7-7.x-3.x-CHANGES.diff to get some hints and idea :D

Comments

admin's picture

Seriously though, great article. Thanks for writing it.

admin's picture

Zen's always been my favourite starting point for making drupal themes. I simple can not live with out it. Thanks for writing this article.

admin's picture

It's a great article. You show us the step-by-step guide for making drupal themes.. Thanks for writing this one..

admin's picture

It's a great article. Always been my favorite starting point for making drupal themes. Thank you for the idea.

admin's picture

Really like your blog content the way you put up the things…I’ve read the topic with great interest.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h4> <h5> <h6>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.
  • HTML tags will be transformed to conform to HTML standards.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.