Drupal and Ubercart 2.x: A new Approach to Drupal Theming

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

£16.99    £8.50
by George Papadongonas Yiannis Doxaras | March 2010 | MySQL Drupal e-Commerce 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 customize the theme and thus offer the client a great browsing experience. We also covered how to create a theme from scratch using the Zen theme. In this article we will cover the following new approaches to themeing:

  • Fusion Theming System with Skinr module
  • Migrating an HTML theme to a Drupal template
  • Creating a Drupal theme from a Photoshop template

Fusion Theming System with Skinr module

At the end of this article, we're going to give you a brief reference to the Fusion Theming System. It was introduced only a few months ago and it's still under heavy development. It's a base theme, meaning that you can create your own subthemes easily, using the Fusion Starter, a commented starter theme created especially for this reason. It uses a 960px or fluid 16-column grid, and its main advantage is that, with the help of Skinr module, it creates l ayout and style confi guration options that the site administrator can control using the website's User Interface, without messing with CSS. So, let's see how to install it, and how to use it for simple customizations.

  1. First navigate to http://drupal.org/project/skinr, and right after you download the module, upload and unzip to your site folder (/sites/all/modules). Then, activate the module from Administration | Site building | Modules.
  2. Navigate to http://drupal.org/project/fusion, and right after you download the theme, upload it and unzip it to your site folder (/sites/all/themes). Then, go to Administration | Site building | Themes, enable both Fusion Core and Fusion Starter themes and set the Fusion Starter theme as the default one.
  3. Browse to admin | build | themes | settings | fusion_starter to configure the settings of Fusion Starter theme. There you will find the default settings of every Drupal theme, such as logo image settings or shortcut icon settings. However, there is also a new section, named Fusion theme settings. There, you can easily change the basic styles and the layout of your theme, such as font family, font size, fixed or fluid layout without using any CSS at all. Click on Save configuration to store your settings.

    Drupal and Ubercart 2.x Theming

  4. Now, if you hover the cursor over any block of your site, you will see a new icon. Clicking on it allows you to configure the properties of this block. You can change the width of the block, the block position, the content alignment, and apply custom styles to the elements of the block, such as padding, border, equal heights, or multi-column menus.

    Drupal and Ubercart 2.x Theming

  5. There are also special settings for every content type. For example, if you go to Administer | Content Management | Content Types | Product, you will see two new sections, named Skinr node settings and Skinr comment settings, where you can apply custom styles to the product page and the product comments.

Drupal and Ubercart 2.x Theming

If you want to create your own custom styles for your theme, and present them in the User Interface, you have to study the documentation of the Skinr module, available at http://www.drupal.org/node/578574.

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

Migrating an HTML theme to a Drupal template

After all these previous discussions, we are now ready to address some more sophisticated XHTML and CSS issues. In this section, we will tackle the problem of converting an existing XHTML CSS template that you may have purchased or created in the past in a Drupal theme. The good news is that what we will describe here is a process of just a few minutes, and it will make your site up and ready for a mockup demo and put it at an 80%-completed level. The bad news is that the remaining 20% may take days to accomplish, as you would probably need to theme your views and specific content areas. However, it is always better to design visualizing the final outcome in front of you, and having some clear indications on what the desirable outcome should look like. We are making the assumption that the HTML template you are starting your conversion with is in the file structure depicted in the following screenshot:

Drupal and Ubercart 2.x Theming

This is the file structure most commonly used by the designers out there. Each HTML template that you will be provided has three basic elements:

  • CSS: The folder or just a single CSS file that contains the visual styles and layout.
  • images: This folder contains all the images that are used either from the CSS or the template by itself.
  • index.html: This file includes all the elements and the hierarchy of our HTML document model.

Many of the free commercial themes out there, often, also provide Photoshop files that correspond to logos or sophisticated typesetting. We will not need any extra files, so we might as well put them aside. For our case study, we have decided to get a free theme from http://wpjunction.com/regresso/, and download it locally, using a brilliant plugin called SaveComplete (https://addons.mozilla.org/en-US/firefox/addon/4723), which manages to capture full CSS (even the @imports) and JavaScript files.

Drupal and Ubercart 2.x Theming

We have chosen this particular theme, because it provides a nice layout for product promotions on the first page.

The Drupal template engine follows strict coding and naming standards, which makes our life easier, as there's only one good practice to follow in order to create our Drupal theme from our plain HTML/CSS files. To avoid confusion, we provide the following conversion steps. So me of them overlap with actions that we have discussed in previous sections, but it would be useful to put them all in one place here:

  1. Move your entire template folder to [youreshoppath]/sites/all/themes. For instance if your theme is called packtpub-eshop, create the folder [youreshoppath]/sites/all/themes/packtpub-eshop and place all your files in there.
  2. Rename your main index.html file to page.tpl.php.
  3. Create a file called [yourthemename].info (in our case, packtpub-eshop.info), with the following elements. For additional information on their significance, you can refer to the Installing Zen theme section of this article.
    name = packtpub-eshop
    description = niobium basic theme.
    regions[header] = Header
    regions[left] = Left sidebar
    regions[right] = Right sidebar
    regions[center] = Center Sidebar
    regions[content] = Content
    regions[footer] = Footer
    regions[toplinks] = Toplinks
    regions[topright] = Top Right
    version = VERSION
    core = 6.x
    engine = phptemplate

    If you create the above file, navigating to your Drupal theme section, you will be able to see your new theme displaying as an option. Do not hurry to select it, as we have to complete the entire process before the changes can make visual effects.

  4. Then, because the Drupal's default template engine can automatically recognize and inject a file called style.css in the template (we will see how in a moment), just rename your CSS file to style.css, and place it in the same level with your page.tpl.php file.
  5. Open style.css and make a quick find-replace changing the image paths to match your new image folder location. If you have preserved the same structure as the initial configuration, you do not need to do anything because URL paths inside CSS are relative to the CSS file location.
  6. Finally, a group of some small changes is the injection of the PHP variables of the template engine inside your page.tpl.php file. There are a number of content and context definition variables, each of which have specific meaning and can be used in certain locations. Furthermore, we will elaborate on the properties made available by the template engine that we will be using in our theme conversion. For the complete list of Drupal's template engine, you can refer to the online documentation at http://api.drupal.org/api/drupal/modules--system--page.tpl.php.

General utility variables

  • $ base_path: This is the URL that corresponds to the path of the Drupal installation. If Drupal is in the root folder, your domain will be /; otherwise, something like /mydrupal/installation/. Note that if you have changed the path of your Drupal installation, you have to run /update.php to update the engine with the new path.
  • $directory: This variable provides the current theme directory, for instance themes/garland. It's useful for defining paths for themespecific JavaScripts and images.
  • $is_front: This is a Boolean variable declaring whether or not the current page is the front page. It's useful for defi ning front pagespecific elements in an if statement while theming.
  • $logged_in: This again is a Boolean variable, defining if the current user is registered and signed in.
  • $is_admin: Another Boolean variable, defining if the user has permission to access administration pages.

Page metadata

  • $head_title: This represents the page title that includes the site name with the specific content page title.
  • $styles: Style tags are necessary to import all CSS files for the page. Style tags including necessary CSS files for the current theme can be configured through the theme info file we discussed previously.
  • $scripts: Script tags are necessary to load the JavaScript files and settings for the page. If you have theme-specific JavaScript files, you need to add them manually using the following theme path conversion:
    <script type="text/javascript"
    src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?php print $base_path . $directory; ?>
    /scripts/script.js">
    </script>

Site identity

  • $front_page: This variable defines the URL of the front page. This variable should be preferred over $base_path, as it includes language-specific prefixes.
  • $logo: This variable defines the path to the logo image, as defined in theme confi guration, namely the theme.info file.

Navigation

  • $search_box: This variable declares HTML formatting displaying a site-wide search box. Note that this variable is empty when search is disabled.
  • $primary_links: This variable defines a themed array containing primary navigation links for the site.
  • $secondary_links: This variable defines a themed array containing secondary navigation links for the site. This will be empty if no secondary links have been confi gured.

Page content (in order of occurrence in the default page.tpl.php)

  • $left: This variable is used to hold the formatted HTML code for the left sidebar, usually the left blocks section. The left section, like every Drupal theme section, should be confi gured in the theme.info file.
  • $breadcrumb: This variable is used for the breadcrumb trail for the current page.
  • $content: This variable defines the main content of the current Drupal page. Either a view or a content page or a CCK page.
  • $right: This variable is the same as $left, except it is used to hold HTML for the right sidebar block area.

All of these variables are included in the following code snippets, which you can, by all means, reuse, as they will do the trick in most cases:

  • The header substitution: Replace your custom HTML header with the code provided below. This code contains all Drupal-specific theming elements as well as all module-dependent stylesheets. If you need to add special JavaScript files for theme-specific functionality, add them below the $scripts variable:
    <!D OCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="<?php print $language->language ?>"
    lang="<?php print $language->language ?>"
    dir="<?php print $language->dir ?>">
    <head>
    <?php print $head ?>
    <title><?php print $head_title ?></title>
    <?php print $styles ?>
    <?php print $scripts ?>
    <!--[if lt IE 7]>
    <?php print phptemplate_get_ie_styles(); ?>
    <![endif]-->
    <meta http-equiv="Content-Language" content="en-us" />
    <meta name="robots" content="all" />
    <meta name="author" content="<?php print $site_name ?>" />
    <meta name="keywords"
    content="packtpub, online, eshop, electronics" />
    <meta name="description"
    content="<?php print $site_name ?> |
    <?php print $site_slogan ?>" />

    Having done that, you can now select the packtpub-eshop theme as your e-shop's default theme. You now have a styled page that does not have any content. In other words, your page now resembles the original theme you extracted.

    Now comes the time to start theming properly and code the layout policy you will follow. Take into account that you can freely get code snippets and ideas from existing themes—both the core ones, such as Garland and Zen, and every other theme that you may fi nd suits your needs from drupal.org. The idea from now on is to start replacing static content with the Drupal variables we have mentioned before, which correspond to HTML-formatted content generated from Drupal's theme engine. We will keep it very simple, so, in addition, we will provide some code snippets for the block layout and the main content of your theme.

  • Links theming: This is one of the most importing and demanding task, especially for online stores with complex product catalogs. Easy navigation is the key to successful sales and conversion rates. In addition to that, SEO enabling demands a good tree structure, so you should make good designing decisions on the link arrangement you need and which of them should be HTML or JavaScript links.
    <?php if (isset($primary_links)) : ?>
    <?php print theme('links', $primary_links,
    array('class' => 'links primary-links')) ?>
    <?php endif; ?>
    <?php if (isset($secondary_links)) : ?>
    <?php print theme('links', $secondary_links,
    array('class' => 'links secondary-links')) ?>
    <?php endif; ?>
  • Content theming: In this section, you are generating the main content area of your site. Content can be a view or a CCK content instance, and can be themed further in other Drupal template engine files such as page.tpl.php, that are out of this article's scope. For further information, you can refer to the online documentation at http://drupal.org/theme-guide.
    <?php if ($title):
    print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'
    . $title .'</h2>'; endif; ?>
    <?php if ($tabs):
    print '<ul class="tabs primary">'
    . $tabs .'</ul></div>'; endif; ?>
    <div class="clear-block">
    <?php print $content ?>
    </div>
  • Sidebar left theming: The left side bar is the left section of your block placement area. All blocks configured in the left area will be displayed here. Note that you should have configured the left section in your theme.info file.
    <?php if ($left): ?>
    <div id="sidebar-left" class="sidebar">
    <?php print $left ?>
    </div>
    <?php endif; ?>
  • Sidebar right theming: This is the same as above, but for the right section.
    <?php if ($right): ?>
    <div id="sidebar-right" class="sidebar">
    <?php print $right?>
    </div>
    <?php endif; ?>
  • Footer theming: The footer theming section just prints the footer HTML content, which is administrated from your Site Information page.
    <div id="footer">
    <?php print $footer_message ?>
    <?php print $footer ?>
    </div>
Drupal E-commerce with Ubercart 2.x Build, administer, and customize an online store using Drupal with Ubercart
Published: March 2010
eBook Price: £16.99
Book Price: £27.99
See more
Select your format and quantity:

Creating a Drupal theme from a Photoshop template

Photoshop website design is a very common starting ground in modern web application design. People often tend to design their layout in Photoshop by adding image mirroring, shadows, transparencies, and other filters, and also visual enhancements in addition to defining the basic layout patterns.

In this section, we will cover the procedure of replicating (I prefer the term replication over cutting, you will see why in a while) your PSD Photoshop theme to XHTML and CSS. If you are the one who creates the designs, just as a general advice, try not to completely mock up all the elements in too much detail. This is because, in HTML, there is always the danger of not being able to replicate the proposed look and feel.

Our philosophy is to approach the PSD not just as an image that should be cut and layered on our page using HTML, but rather as a pattern that indicates how our page should look in the end. Therefore, we propose to start by trying to replicate all of the design elements using XHTML and as much CSS as possible, and refer to image cutting and exporting only when you see an effect that you either cannot replicate with CSS or would take an exceptionally long time to do it. Many web designers tend to cut large images into little pieces or use automated software components to achieve the same look and feel. However, in the end, this approach will result in cluttered HTML, and remove all the control that a good CSS layout adds to your design. Moreover, you do not want to rely on the images too much for your theming design, because there are hundreds of reasons that images might not be fetched, and you definitely do not want network problems to interfere with your basic template design.

So to start with, let's introduce our sample PSD that is available for downloading at the code section, and tries to simulate a common theme with areas of focus.

Drupal and Ubercart 2.x Theming

We will not go through the entire process, as such an activity presumes in-depth knowledge of CSS and XHML. However, for all those competent in these technologies, we will provide a straightforward approach that will help produce the most professional results with less effort.

If you want to find out more about theming in Drupal and especially dive into the magnificent world of CSS, a good place to start is Drupal 6 Themes by Ric Shreves.

The key concept is only to cut out from Photoshop parts and images that you cannot get along without and leave everything else to handle in CSS magic. So, things such as the following should always be used as is from your PSD:

  • Repeating backgrounds and gradients
  • Rounded corners and shadows
  • Typesetting that cannot be reproduced with standard CSS

All other components such as background colors, text, and decoration elements should be coded into your CSS. Another issue you should keep in mind is to try to write strict XHTML and separate all of your styling rules into your CSS.

After we have provided some general guidelines, we will cut and create two basic elements, the background and the logo, just to give you the idea of PSD to HTML conversion. To migrate your background images from your Photoshop template to your Drupal theme, follow the next steps:

  • If our background is a structured image, there are many techniques for automatic window scaling. However, these techniques trim it down to a lower-pixel width or height to achieve smaller image file size. Take into account that if your pattern is vertical and demands vertical replication, you should cut a one-pixel height and full-width background image. In the same away, if you have for instance a horizontal gradient fill for your background, you should cut a one-pixel width image.
  • Click on Export for Web, and theme your CSS as we display below:

    Drupal and Ubercart 2.x Theming

    The CSS code is as follows:

    body {
    background-color:#FFFFFF;
    background-image:url(body-bg.gif);
    background-repeat:repeat-x;
    color:#3B1E08;
    font-family:arial,helvetica,sans-serif;
    font-size:0.9em;
    line-height:1.5em;
    margin:0;
    padding:0;
    }

Next, we will see how we can export our logo from our PSD template. Keep in mind, that if our logo can be recreated with standard CSS typesetting, we should try to import it in the CSS. However, this is a rather rare case as corporate logos tend to change, and most of the times, you will need to export it in a GIF image. To do so, perform the following actions:

  • Group all your logo components to a new layer in Photoshop.
  • Trim the layer of all the transparent pixels to get the smallest file size.
  • In Export for Web, choose the transparent GIF option. (Note that PNG background transparencies do not show up in Internet Explorer 6.) So if you indeed need to use PNG image formats, you need to include jQuery pngFix JavaScript library, located at http://jquery.andreaseberhard.de/pngFix/, or install PNG Fix Drupal module, located at http://drupal.org/project/pngfix.
  • Theme the image as background to achieve an XHTML layout, and you are done.
Drupal and Ubercart 2.x Theming

You can also see the CSS code for the logo background as follows:

h1.logo a {
background-image:url(logo.gif);
background-repeat:no-repeat;
display:block;
height:0;
margin-left:auto;
margin-right:auto;
overflow:hidden;
padding-top:78px;
width:170px;
}

So, you are now ready to take it up from here, referring to the PHP variables of the Drupal default template engine we introduced in the previous section. Finally, keep in mind that putting most of your visual layouts and markup in your CSS and keeping your HTML clean and tidy will enable you to perform all kinds of changes in the future and enhance your site template maintainability.

Summary

We went through some of the vast configuration options that the Drupal theme engine provides us with. We have discussed important theme selection tips you should follow when choosing your custom template and configuring it to meet your needs. This process involves a lot of experimenting and page refreshes. Also note that at the time of uploading content, new needs will emerge, needs concerning visual enhancements and product advertising. Decision calls will be made for choosing the most appropriate user interface layouts. Finally, due to the fact that this is a continuous process and will never stop evolving, you need to have in-depth understanding of your theme functionality to better support future calls.


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


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


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