Drupal and Ubercart 2.x: Customizing a theme

Customizing a theme

In this section, after we have elected our primary theme, we will go step-by-step customizing it and making it suit our business need. These configurations are necessary even if you choose to hire a designer or buy a ready-made theme.

Changing basic elements

Every Drupal theme using the template engine produces HTML code from Drupal core objects. Therefore, some content of the final HTML code generated is actually site-wide property such as site slogan, mission, and site name. We will have to change Drupal default settings and provide our business details. To do this, go to Home | Administer | Site configuration and edit the fields as we describe next. If you do not want to provide specific information, for instance if you do not have a corporate slogan, you need not fill this option. Nothing will appear if the attribute is not set to the main page of your online shop.

Drupal and Ubercart 2.x Theming

You can edit the following elements:

  • Name: This is your site's name and will be displayed in the site name theme section and can also be a part of the HTML <title> element.
  • E-mail address: A valid e-mail address for your website, used by the mailer functionality during registration, new password requests, notifications, purchases, and all mail communication to your users. E-mail server details that your site uses are placed in your php.ini file. The majority of web hosting solutions have a preconfi gured mail server environment and you will not have to deal with it.
  • Slogan: The slogan of your website. Some themes display a slogan when available. It will also display in the title bar of your user web browser, so if you decide to choose one, do it wisely.
  • Mission: Your site's mission statement or focus. Your mission statement is enabled in your theme settings and requires that the theme supports its display.
  • Footer: This text will be displayed at the bottom of each page. Useful for adding a copyright notice to your pages. You can also use HTML tags to include an image for instance.
  • Anonymous user: The user name for unregistered users is "Anonymous" by default. Drupal gives you the option to change this to something different according to your target user group (for example "New Customer").
  • Default front page: This setting gives site administrators control over what Drupal-generated content a user sees when they visit a Drupal installation's root directory.

We quote from the Drupal documentation section for site configuration:

This setting tells Drupal which URL users should be redirected to. It's important to note that the URL is relative to the directory your Drupal installation is in. So, instead of
it is only necessary to type "node/83". For those not using clean URLs, note that there is no need to type in "?q=" before typing the URL.
By default, the "Default front page" is set to "node," which simply displays articles that have been "Promoted to front page." Note that when changing the "Default front page" to something other than "node", nodes that are "Promoted to front page" will no longer appear on the front page. They can however, still be viewed by visiting the relative URL path "node".
If the path specified is not a valid Drupal path the user will be confronted with a "Page not found" error. It is not possible to redirect users to any web documents (e.g. a static HTML page) not created by the Drupal site.

Changing page properties and layout

As we have seen, each theme comes with its own special options along with Drupal's default configuration. These options let us interfere with most of theme layout settings and perform in-depth customization. In this section, we will refer to these options one by one. To do so, we should navigate to Home | Administer | Site Building | Themes | Configure.

Theme global settings

In every fresh Drupal installation, Garland is enabled as the default theme. Click on the Configure tab next to List, and you will see the global settings for themes. Apparently these settings apply to all themes. On this screen, you can configure the following options:

  • Toggle display: It handles visibility for specific page elements. You have to configure them in the Site configuration page first. (see previous section).
  • Logo image settings: If toggled on, the following logo will be displayed. You have the option to upload a new logo image replacing the old one.
  • Shortcut icon settings: Your shortcut icon, or favicon, is displayed in the address bar and in the bookmarks of most browsers. Drupal also provides the option to upload your own custom favicon to replace the smiling Druplicon. We like Druplicon, but your site should display your identity and a custom favicon is indication of good design. If you want to easily create a favicon for your site, you can use an online tool like FavIcon generator, available at http://tools.dynamicdrive.com/favicon/.

    Drupal and Ubercart 2.x Theming

  • Display post information: Enable or disable the submitted by Username on date text when displaying posts. This is a very useful option and should be used in non-content or community-oriented Drupal installation such as online shops. It is strongly advisable to uncheck this option.

Theme-specific configuration

Next to the Global settings subtab is a list of enabled themes. On a new installation, only Garland will be listed. Select Garland for now. At this moment, you should feel free to experiment.

  • General Settings: These are the settings concerning visibility of certain UI elements.
  • Mission Statement: This option lets you choose where to display your mission statement.
  • Breadcrumb: This option lets you choose whether or not to display a breadcrumb trail. If you have a product catalog, this is a very useful feature for your site. For instance, if a customer navigates to the iPod page, the breadcrumb trail will provide the full navigation, Electronics | MP3 | Apple. Therefore, your customer can go directly to the MP3 section and see other products, such as Creative or Sony walkmans.
  • Username: Display "not verified" for unregistered usernames.
  • Node Settings: Adjust how and which information is being shown with your content. You can modify these settings, so they apply to all content types, or check the Use content-type specific settings box to customize them for each content type. For example, you may want to show the date on stories, but not pages.
  • Author & Date: Check accordingly to display or not the author's username and the date the node is posted. Remember that you can globally configure this display from the default theme setting page. The date format is also customizable through the Date and Time settings page Home | Administer | Site configuration | Date and Time.

    Drupal and Ubercart 2.x Theming

  • Taxonomy Terms: This is a very important screen, because as of Drupal 6, there are so many theming and display options in theme confi guration.

    Drupal and Ubercart 2.x Theming

  • Links Read More: This setting provides options to change the display texts for the Read more functionality below node teasers or views.

    Drupal and Ubercart 2.x Theming

  • Comments Full Content: The link when the full content is being displayed. HTML is allowed.
  • Comments Teaser: Customize new comment links. You can choose the label end users will see when they are called to comment on content.

In a ll the fields we discussed, you can use HTML fragments along with performing label translations through Drupal translation interface.

Theme development settings are strictly the developer's concern and they handle theme registry parsing, a procedure that searches for all template files from the filesystem. We should leave this checkbox unchecked.


In this article we saw how you can install and customize a ready-made theme. In the next article we will Create a theme from scratch using the Zen theme.

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

You've been reading an excerpt of:

Drupal E-commerce with Ubercart 2.x

Explore Title