Drupal E-commerce with Ubercart 2.x — Save 50%
Build, administer, and customize an online store using Drupal with Ubercart
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/.
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.
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.
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.
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.
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/).
eBook Price: $26.99
Book Price: $44.99
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.
- Go to http://www.drupal.org/project/zen and download the latest release for Drupal 6.
- Unzip the file and upload it to the ../sites/all/themes folder of your site.
- Go to Administer | Site Building | Themes.
- 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.
- Enable the Zen theme and set it as the default theme.
- 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.
- Copy the STARTERKIT folder, located inside the Zen folder, to ..sites/all/themes.
- Rename the STARTERKIT folder to MYTHEME.
- 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.
- Rename STARTERKIT.info to MYTHEME.info.
- 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.
This file is extremely important, so we are going to analyze together every line of code.
; $Id: MYTHEME.info,v 126.96.36.199 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
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.
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.
- 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.
- 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.
- Rename zen.css to MYTHEME.css.
- 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.
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.
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.
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 :
- Installation of Drupal and Ubercart 2.x
- Drupal and Ubercart 2.x: Install a Ready-made Drupal Theme
- Drupal and Ubercart 2.x: Customizing a theme
- Drupal and Ubercart 2.x: A new Approach to Drupal Theming
- User Interface Enhancement Techniques with Drupal and Ubercart 2.x
- Product Cross-selling and Layout using Panels with Drupal and Ubercart 2.x
eBook Price: $26.99
Book Price: $44.99
About the Author :
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 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.