Drupal and Ubercart 2.x: Install a Ready-made Drupal Theme

Packt Publishing

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

Install a ready-made Drupal theme

We have to admit that Drupal was not famous for its plethora of available themes. Until recently, the Drupal community was focused on developing the backend, debugging the code, and creating new modules. The release of Drupal 6 made theming much easier and helped the theming community to grow. Now, there are not only thousands of Drupal themes, but also dozens of themes designed and customized especially for Ubercart.

Basic principles when choosing a theme

Choosing a theme for your online shop is not an easy task. Moreover, it can be even harder considering that you want to promote specific items from your catalog, you need to change first page items often, and you need to rapidly communicate offers and loyalty policies and other business-related stuff. Ubercart-specific themes mostly target the following special areas:

Product catalog

Shopping cart

Product-specific views

You should keep these layout regions in mind, while going through the following section on theme selection. Before you search for any kind of theme layout, provide your neurons with enough input to inspire you and help you decide. Perform a quick Google search for online shops in your target market to get some inspiration and track down sites that make you, as a customer, feel comfortable during product searching and navigation. If you decide to search for professional help, a list of existing sites will help you to communicate your preferences much more directly.

What better place to search for inspiration and successful practices than Ubercart's live site repository! You will find good practices and see how mostly people like you (without any development background) have solved all the problems that might occur during your search for themes.http://www.ubercart.org/site

Next we describe the main user interface components that you should keep in mind when deciding for your online shop:

Number of columns: The number of columns depends on the block information you want to provide to your end customers. If you need widgets that display on every page, information about who bought what, and product or kit suggestions, go with three columns. You will find a plethora of two-column Drupal themes and many three-column Drupal themes, while some of them can alternate between two and three columns.

Color scheme: From a design perspective, you should choose a color scheme that matches your company logo and business profile. For instance, if your store sells wooden toys, go with something more comic such as rounded corners, but if you are a consulting firm, you should go with something more professional. Many themes let you choose color schemes dynamically; however, always keep in mind that color is a rather easy modification from the CSS. You can get great color combination ideas from COLOURlovers online service (http://www.colourlovers.com/) that match your logo and business colors.

Be careful though. If you choose a complex theme with rounded corners, lots of images, and multiple backgrounds, it may be difficult to modify it.

Drupal version: Make sure the Drupal theme you choose is compatible with the version of Drupal you are running. Before using a Drupal theme, look up notes on the theme to see if there are any known bugs or problems with it. If you are not a programmer, you do not want a Drupal theme that has open issues.

Extra features: Many Drupal themes expose a large set of configuration options to the end users. Various functionality such as post author's visibility or color scheme selection are welcome for managing the initial setup. Moreover, you can change appearance in non-invasive ways for your online marque.

Regions available: We have discussed column layouts, but for the Drupal template engine to show its full capabilities and customization, you definitely need multiple regions. The more regions, the more choices you have for where to put blocks of content. Therefore, you can have space for customizing new affiliate ads for instance, or provide information about some special deals, or even configure your main online shop page, as we will see in the next section.

Further customization and updates: When you choose your theme, don't just keep the functionality of version 1.0 in mind, but consider all of the future business plans for approaching your target market and raising sales figures. Make a three-year plan and try to visualize any future actions that should be taken into account from day one. Although you can change themes easily, you are better off choosing a more flexible theme ahead of time than having to change the theme as your website grows.

Always bear in mind that the famous razor of Occam also applies to online shop theme design. Keep it simple and professional by choosing simple layouts, which allow ease of use for the end user and ease further customize designs and themes (changing colors, adding a custom image header, and so on).

Before you start, clearly define your timeline, risks, total theme budget, and skills. Theming is usually 25-40% of the budget of an entire online shop project. Drupal's theming engine closely integrates with actual functionality and many features are encapsulated inside the theme itself.

There are a number of different ways in which you can get yourself the best theme for your online store. We will go through all these approaches with useful comments on what options best suits your needs.

Do it yourself

If you have moderate skills in XHTML/CSS and you also know how to operate a graphics editor, you may very well be able to create your own Drupal theme. Knowing how Drupal's bits and pieces work is more important than any kind of advanced PHP knowledge. If you have decided to experiment and do it yourself for the first time, probably it is best to install and modify a ready-made theme.

Total time spend on theme selection

Time will vary from one week to one month, especially if you create your theme from a Photoshop template (PSD) and cut the layers to XHTML/CSS. It also depends on the number of different page themes you create.

Budget

If you do not count your personal time in the project budget, then total budget spend is zero.

Places to look

Get it for free

The Drupal theming community is expanding and many themes are ported from other popular CMSs like Wordpress and Joomla!. This is the fastest way and you are advised to go with it if you are short on budget or time to spend.

Total time spend on theme selection

Time will vary from one hour to two days max; most of the time will be spent on installing a theme and then changing it, in order to find the most suitable one for your site.

Budget

The budget would be the same as if you were to do it yourself.

Places to look

You can visit the following pages:

Drupal Themes (http://drupal.org/project/Themes): Here you can find the most updated and fullest repository of ready-to-use Drupal themes. Use of search filters is strongly advised; you can search for popularity, recent activities, and target Drupal version.

Theme Garden (http://themegarden.org/drupal6/): Theme Garden is a project that provides useful information and insight about Drupal themes along with theme previews, a very clever feature that saves time.

Buy it

You can go with the nearly free theme route, downloading a theme from an inexpensive theme seller, or you can buy a premium, high-quality theme. The former will get a site up and running for little to no cost, but you may fi nd yourself limited by the number of regions, quality, and features of the inexpensive themes.

Total time spend on theme selection

Time will vary from one hour to two days max; most of the time will be spent on downloading and installing a theme, and then again changing to new one to suit your needs.

Budget

From $30 for a basic theme, to $400 for a premium theme, along with a few hundreds of dollars if you choose to get a Drupal themer to alter an already-purchased theme in order to suit your needs and stand out from similar templates.

Hire a designer

Finally, you can hire a designer or themer to make a completely custom Drupal theme for your site. This will give you the maximum control, but is the most time-consuming and expensive option. There are many Drupal design and theming shops out there. A custom theme involves having a design created for your site from scratch, usually by a designer who then provides mockups (or mockups and CSS) to a Drupal themer.

Total time spend on theme selection

Time taken may vary from one week to two months depending on the communication between the themer, the designer, and you.

Budget

Trying to provide a rough estimation about the cost of a custom theme is not straightforward and depends on a number of factors. The bare minimum for an extremely basic, single-page design would be a few hundred dollars. The average cost for a small business site design plus Drupal theme would be in the lower range of thousands. This can vary widely due to things like number of unique pages, whether or not Drupal module support required, if you need a logo, and so on, but hopefully that gives you a general idea.

Places to look

There are a small but rapidly emerging number of Drupal theming shops out there. We suggest you make a quick search and ask for references and portfolios. Be careful to ask for XHTML/CSS-strict themes and make a detailed list of what you want developed before signing the contract to save both parties from misconceptions.

Installing a Drupal theme

After you have decided the best theme to go along with your online store, you should follow these steps to install it. This is a very straightforward procedure:

We will go through installing the second most popular Drupal theme according to Drupal.org statistics. Go to http://drupal.org/project/acquia_marina and click on the download link next to the 6.x-1.9 version.

Secondly, you have to upload the theme to your local site theme directory using FTP. Theme should be unzipped and placed in the [DRUPAL ROOT]/sites/all/themes path of your Drupal site installation.

After you extract the zipped file in the themes directory, navigate to the themes administration screen (Home | Administer | Site Building | Themes), or hit a page refresh if you are already there. Select the theme that you want to install and press Save configuration.

After you apply the theme, your online shop will look like the following:

For those of you coming from another CMS such as Joomla!, where you are more familiar with a separate administration interface, you may also simulate this behavior in Drupal. Another good reason for doing so is that, this way you will be able to perform administrative tasks without any distraction that eye-catching e-shop features will pose. To do that, go to Home | Administration | Site configuration | Administration Theme and choose a light-weighted theme, such as Garland. This theme will be activated only when you authenticate using a user with administration privileges.

Summary

In this article we saw how you can install a ready-made theme, free or commercial, and use it as is. In the next article we will cutomize the theme.

Alerts & Offers

Series & Level

We understand your time is important. Uniquely amongst the major publishers, we seek to develop and publish the broadest range of learning and information products on each technology. Every Packt product delivers a specific learning pathway, broadly defined by the Series type. This structured approach enables you to select the pathway which best suits your knowledge level, learning style and task objectives.

Learning

As a new user, these step-by-step tutorial guides will give you all the practical skills necessary to become competent and efficient.

Beginner's Guide

Friendly, informal tutorials that provide a practical introduction using examples, activities, and challenges.

Essentials

Fast paced, concentrated introductions showing the quickest way to put the tool to work in the real world.

Cookbook

A collection of practical self-contained recipes that all users of the technology will find useful for building more powerful and reliable systems.

Blueprints

Guides you through the most common types of project you'll encounter, giving you end-to-end guidance on how to build your specific solution quickly and reliably.

Mastering

Take your skills to the next level with advanced tutorials that will give you confidence to master the tool's most powerful features.

Starting

Accessible to readers adopting the topic, these titles get you into the tool or technology so that you can become an effective user.

Progressing

Building on core skills you already have, these titles share solutions and expertise so you become a highly productive power user.