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.
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.
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.
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/).
