Drupal and Ubercart 2.x: Creating a Theme from Scratch Using the Zen Theme

Exclusive offer: get 50% off this eBook here
Drupal E-commerce with Ubercart 2.x

Drupal E-commerce with Ubercart 2.x — Save 50%

Build, administer, and customize an online store using Drupal with Ubercart

$26.99    $13.50
by George Papadongonas Yiannis Doxaras | March 2010 | MySQL Drupal e-Commerce Open Source PHP Web Development

In the previous articles by George Papadongonas and Yiannis Doxaras, authors of Drupal E-commerce with Ubercart 2.x, we learnt how to install a ready-made theme and how to customize it, thus offering the client a great browsing experience. In this article we will learn how to create a theme from scratch using the Zen Theme.

In the previous article, we showed you the easy way to install and customize a ready-made theme. This solution is good enough for many shop owners, but if you want to use a unique design for your store, the only solution is to build a theme from scratch. We are going to use the Zen Theme, ma ybe the most popular theme for Drupal. Zen is actually not just a simple theme, but rather a theming framework, because it allows the creation of subthemes. Using a subtheme, we can use all of the great code of Zen and apply only our design customizations, using some simple tools and writing only a few lines of code. So, don't be afraid but enjoy the process. Just think how proud you'll feel when you will have finished your amazing frontend for your store. You don't have to be a programming Ninja, all you have to know is some HTML and CSS. If you have no programming experience at all, you can follow some very interesting tutorials at http://www.w3schools.com/.

The tools

We are going to use some simple and free tools, which are easy to download, install, and use. Some of them are extensions for Firefox, so if you are not using this particular browser, you have to download it first from http://www.getfirefox.com.

Firebug

This is the first extension for Firefox that we are going to use. It's an open source and free tool for editing, debugging, and monitoring HTML, CSS, and JavaScript in our web pages. Using Firebug, you can understand the structure of an Ubercart page and inspect and edit HTML and CSS on the fly. To install it, go to http://getfirebug.com/, skip the terrifying bug, and click on Install Firebug for Firefox. You will be transferred to the Firefox add-ons page. Click on Add to Firefox. A new window opens with a warning about possible malicious software. It's a common warning when you try to install a Firefox extension, so click on Install now.

Drupal and Ubercart 2.x Theming

When the download is completed, click on Restart Firefox. When Firefox restarts, Firebug is enabled. You can activate it by clicking on the little bug icon at the bottom-right corner of the window.

Drupal and Ubercart 2.x Theming

When Firebug is activated, it splits the browser window into two parts. The top part is the normal page and the bottom part shows the HTML or CSS code of the whole page, or for a selected element. There, you can inspect or edit the code, make tests, and try different alternatives.

Drupal and Ubercart 2.x Theming

It is now possible to use Firebug in Internet Explorer, Opera, or Safari, using Firebug Lite. It's a small JavaScript file and you can download it from http://getfirebug.com/lite.html.

ColorZilla

ColorZilla is also a Firefox extension. It provides useful tools related to color management, such as eyedropper, color picker, or palette viewer.

You can download it from http://www.colorzilla.com/firefox/. Click on Install ColorZilla. A new window opens with a warning about possible malicious software, like we saw in the Firebug installation, so click on Install now and then Restart Firefox. When Firefox restarts, ColorZilla is enabled. You can activate it by clicking on the little eyedropper icon at the bottom left corner of the window.

Drupal and Ubercart 2.x Theming

A code editor

We need it to write and edit our template and CSS files. There are many freeware applications, such as HTML Kit (http://www.chami.com/html-kit/) and Webocton (http://scriptly.webocton.de/9/34/start/englishpage.html), or commercial applications, such as Ultraedit (http://www.ultraedit.com) or Coda (http://www.panic.com/coda/).

Drupal E-commerce with Ubercart 2.x Build, administer, and customize an online store using Drupal with Ubercart
Published: March 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Characteristics and advantages of Zen theme

According to its creators, "Zen is the ultimate starting theme for Drupal", and this is the truth. It is appropriate not only for the site administrator who wants to create a new simple subtheme, but also for the advanced developer who needs to create a complex theme for a large portal. It uses standards-compliant and semantically correct XHTML code and allows the creation of a new subtheme, just by copying some files, changing their basic information, and editing a CSS file.

The main advantages of Zen theme are:

  • It has great online documentation.
  • It has a large community, providing amazing support for every problem
  • It has a small learning curve.
  • Supports fixed or liquid layout.
  • Supports layouts with one, two, or three columns.
  • When you hover the cursor over a block, it provides an edit link, allowing you to edit the content of the block on the fly and return back to the page where you were working. There is no need to go to the admin pages just to edit a block.
  • Extra body classes, such as .front or .logged-in, give the developer the opportunity to create custom themes for separate pages, just by targeting those classes. There is no need to mess up with custom Drupal template files.
  • The print.css file optimizes the content of a page for printing.
  • The ie.css file makes debugging for Internet Explorer a much easier process.

Installing Zen theme

The first step is to install Zen theme. The procedure is exactly the same as with every other Drupal theme.

  1. Go to http://www.drupal.org/project/zen and download the latest release for Drupal 6.
  2. Unzip the file and upload it to the ../sites/all/themes folder of your site.
  3. Go to Administer | Site Building | Themes.
  4. There, you will see three new available themes: Zen, which is the default theme; Zen Classic, which is a ready-made Zen subtheme in blue color; and Zen Themer's Starter Kit, which is actually the framework that allows us to create a new custom subtheme.
  5. Enable the Zen theme and set it as the default theme.

    Drupal and Ubercart 2.x Theming

  6. Click on Save configuration.

Creating and customizing a Zen subtheme

Creating a Zen subtheme is a standard process with specific steps. If you just want to add some simple colors by using CSS, or if you plan to slice and convert a PSD file to a complex Drupal theme, the process is almost the same. You have to create a Zen subtheme and make all the modifications there. There is a simple question that we hear all the time: Why do we have to create a Zen subtheme, isn't it simpler to just edit the files of Zen theme? Well, maybe it's the easiest path, but you may face the following problem: Zen is an active project and every few weeks there is a new version including bug fixes and new features. If you've changed the source code of the original Zen theme and you install a new version, your old files will be overwritten and all your changes will be lost. On the other hand, the files of the subthemes are stored in a subfolder, isolated from the core files of Zen theme, so you can install updates without any problems.

This is the first time and maybe the only one in this article, where you have to edit the code of some files, or create new code. We're going to show you the step-by-step process, explaining every step in detail and analyzing every line of code. So, let's start and create your first Ubercart theme, named MYTHEME.

  1. Copy the STARTERKIT folder, located inside the Zen folder, to ..sites/all/themes.
  2. Rename the STARTERKIT folder to MYTHEME.
  3. Copy the following files from the Zen folder to the MYTHEME folder:
    html-elements.css, layout-fixed.css, print.css, ie.css, zen.css. These are the basic CSS files needed to customize your theme. html-elements.css contains the basic format for the main HTML elements, such as fonts, headings, lists, links, and tables. layout-fixed.css is used to create a table-free, three-column, two-column, or single-column layout depending on whether blocks are enabled in the left or right columns. print.css is called when we want to print a page. It removes all the unimportant elements and sends a simpler version of the page to the printer. ie.css is a CSS file especially for Internet Explorer. Finally, zen.css is our main CSS file. It already contains the basic classes and IDs, but as you proceed, you can add your own and edit the existing ones.
  4. Rename STARTERKIT.info to MYTHEME.info.
  5. Open MYTHEME.info and replace all STARTERKIT instances to MYTHEME. In Drupal, every theme has an .info file, which is actually a configuration file. There are some required options, such as name, core, and engine and some optional ones, such as description, screenshot, base theme, regions, features, stylesheets, scripts, and PHP.

    Drupal and Ubercart 2.x Theming

    This file is extremely important, so we are going to analyze together every line of code.

    ; $Id: MYTHEME.info,v 1.13.2.1 2009/02/13 06:13:18 johnalbin Exp $

    This first line shows the name and the version of this file.

    name = Enter your desired name
    description = Enter your desired description

    The name and description of the theme that you enter here are used on the admin | build | themes page.

    screenshot = screenshot.png

    The screenshot of the theme that you enter here is used on the admin | build | themes page.

    core = 6.x
    base theme = zen

    core shows the version of Drupal that this theme is compatible with, and base theme shows which theme our subtheme uses as a main theme. You don't have to change anything here.

    stylesheets[all][] = layout-fixed.css
    stylesheets[all][] = html-elements.css
    stylesheets[all][] = MYTHEME.css
    stylesheets[print][] = print.css

    Here, you can declare the CSS files that are used by our theme. The word inside the brackets shows the media type that uses this specific CSS file.

    conditional-stylesheets[if IE][all][] = ie.css

    Here, we set the conditional stylesheets that are processed by Internet Explorer.

    scripts[] = script.js

    We can also use jQuery scripts in our theme. jQuery is a javaScript library used to enhance user experience. Drupal includes jQuery version 1.2.6 in its core.

    regions[left] = left sidebar
    regions[right] = right sidebar
    regions[navbar] = navigation bar
    regions[content_top] = content top
    regions[content_bottom] = content bottom
    regions[header] = header
    regions[footer] = footer
    regions[closure_region] = closure

    Zen theme uses eight regions. A region is nothing more than a placeholder for one or more blocks. The word inside the brackets is the name of the region in Drupal template files and the word at the right is the description of the region used in admin | build | blocks page.

    Drupal and Ubercart 2.x Theming

    features[] = logo
    features[] = name
    features[] = slogan
    features[] = mission
    features[] = node_user_picture
    features[] = comment_user_picture
    features[] = search
    features[] = favicon
    features[] = primary_links
    features[] = secondary_links

    A Drupal theme contains many extra features, which can be customized from admin build | themes | settings | MYTHEME| page. Here we declare all the features that we are going to use. You can find a list of all the available features in http://drupal.org/node/171205#features.

    settings[zen_block_editing] = 1
    settings[zen_breadcrumb] = yes
    settings[zen_breadcrumb_separator] = ' > '
    settings[zen_breadcrumb_home] = 1
    settings[zen_breadcrumb_trailing] = 1
    settings[zen_breadcrumb_title] = 0
    settings[zen_rebuild_registry] = 1
    settings[zen_wireframes] = 0

    In this section, we set all the default settings that are going to be used in theme-settings.php file, such as block editing or breadcrumb usage. Usually, these settings are just fine and we don't have to change anything.

    ; Information added by drupal.org packaging script on 2009-02-13
    version = "6.x-1.0"
    core = "6.x"
    project = "zen"
    datestamp = "1234555897"

    The information in this section is added automatically when the creator of Zen theme publishes it on http://www.drupal.org.

  6. Open the template.php file and rename all STARTERKIT instances to MYTHEME. Customizing this file is out of the scope of this article, as it requires the use of PHP programming language. In complex sites, it's impossible to create custom themes without altering this file; however, for our small site, you don't have to make any customizations here.
  7. Open theme-settings.php file and rename all STARTERKIT instances to MYTHEME. This is the only change that you have to do in this file, and keeping all the default options is just fine.
  8. Rename zen.css to MYTHEME.css.
  9. Write your CSS code. The recommended workflow is to build the basic layout using the layout-fixed.css file, customize the basic HTML elements in html-elements.css, work in MYTHEME.css, and finally debug for Internet Explorer in ie.css.

    If you need more details about the aforementioned files, remember that Zen theme offers great documentation, available at http://drupal.org/node/193318.

    Drupal and Ubercart 2.x Theming

  10. Finally, go to admin build | themes | settings | MYTHEME|, and configure the theme from the administration section of Drupal. There are display settings, logo image settings, and shortcut icon settings. In the display settings section, there are several elements (declared in MYTHEME.info), which you can enable or disable, depending on your needs. There are elements such as logo, site name, site slogan, mission statement, user pictures in posts, user pictures in comments, search box, shortcut icon, primary links, and finally, secondary links.
    In the logo image settings and shortcut icon settings sections, we can use the default logo or icon, give a path to a custom one, or upload a new one directly to the server.

    Drupal and Ubercart 2.x Theming

There is a very interesting video tutorial about Drupal theming. If you have an hour available, watch it at http://gotdrupal.com/videos/drupal-theme-makeover.

Summary

In this article we saw how you can create a theme from scratch using the Zen theme. In the next article we will new approaches to themeing.


If you have read this article you may be interested to view :


Drupal E-commerce with Ubercart 2.x Build, administer, and customize an online store using Drupal with Ubercart
Published: March 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


George Papadongonas

George Papadongonas is the owner of a small web development firm, located in Athens, Greece. He started his career as a freelancer web developer in 2000 and works with small and medium size enterprises. He has experience in many development platforms, but felt in love with Drupal in 2007 and with Ubercart in 2008. He is a member of Drupal Association and an active supporter of the open source community.

Yiannis Doxaras

Yiannis Doxaras has studied theoretical physics at University of Athens and University of Cambridge. He is co-founder of OSIS, a Greek open source startup company that provides turn-key solutions in industries like travel, e-learning, and e-government. Yiannis is an active committer in various open source projects mainly with Java, Python and PHP technologies. He is a serial entrepreneur and innovation broken in Greece and the Balkans.

Books From Packt


Drupal 7 First look
Drupal 7 First look

MySQL Admin Cookbook
MySQL Admin Cookbook

Magento 1.3 Sales Tactics Cookbook
Magento 1.3 Sales Tactics Cookbook

Drupal 6 Performance Tips
Drupal 6 Performance Tips

PHP 5 E-commerce Development
PHP 5 E-commerce Development

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

TYPO3 4.2 E-Commerce
TYPO3 4.2 E-Commerce

Drupal 6 Attachment Views
Drupal 6 Attachment Views


Your rating: None Average: 5 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
c
A
t
n
N
H
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software