Reference

Our team has created countless themes for Ubercart and seen others struggle with theming for this e-commerce suite that is ever growing in popularity. Fusion gives you a big head start when theming for Ubercart. If you don't need the Ubercart features, you can simply delete the node-product.tpl.php file (and node.tpl.php if you don't need it, since it will now inherit Fusion Core's node.tpl.php).

Product node template

Fusion includes custom functions for manipulating the display of Ubercart product data, and a custom node-product.tpl.php for easily moving these around.

Each Ubercart product class is a new content type, but all of these will use the node-product.tpl.php file.

Ubercart helper CSS

Fusion Core also includes some basic styling for Ubercart to help improve the display of your catalog grid and checkout.

A Fusion sub-theme's .info file can have a number of defaults for the theme settings. Example from Fusion Starter:

Here are all the current possible values:

Grid layout (which type of grid, number of columns, pixel width vs fluid -- 16 col 960px grid is available currently)

grid16-960
grid16-fluid

Fluid grid width (if a fluid grid, which percentage width is it)

fluid-100
fluid-95
fluid-90
fluid-85

Font size (Fusion uses a percentage system, but these are the pixel equivalents when the user's browser default is set to the standard 16px)

font-size-10
font-size-11
font-size-12
font-size-13
font-size-14
font-size-15
font-size-16
font-size-17
font-size-18

Sidebar layout

sidebars-split
sidebars-both-first
sidebars-both-last

Sidebar width (in grid units)

2
3
4
5
6
7
8

How to create a sub-theme

1. Copy the fusion_starter folder from Fusion and rename to the name of your choice (eg. "mysite_theme")
2. Rename the .info file to the same name you just gave the folder
3. Open the .info file and you can give your theme a more descriptive name and full description here
4. On this line stylesheets[all][] = css/fusion-starter-style.css, replace the "fusion-starter" part with your theme's name
5. Rename the css file in the css/ folder to match
6. Upload to your site and enable Fusion Core and your new theme on admin/build/themes!

Deconstructing the .info file

Your Fusion sub-theme's info file does some important things, such as define regions, Skinr styles, and theme defaults. Here we'll break down the various sections of the .info file and explain what's happening under the hood.

You're probably not changing anything here other than the name and description to match your custom sub-theme.

stylesheets[all][] = css/fusion-starter-style.css

Features

A list of features, roadmap, known issues, etc. can be found on the Fusion project page

Installing Fusion

If you've ever installed a Drupal theme before, you'll find that installing Fusion is just as easy. And if you haven't, don't worry: You'll still be fine! There are five simple steps:

Zenophile allows themers to very easily create Zen subthemes without all the tedious file copying and find-and-replacing required when creating subthemes by hand. See Zenophile's project page for more information.

Installation and usage

(Note that this guide targets the 2.0 branch of Zenophile, but much of it should be applicable to earlier versions as well.)

1. Install the Zen theme, if you haven’t already.
2. Install this module like any other module.
3. If necessary, go to Administration > Users > Permissions and grant groups the “create theme with zenophile” permission.
4. Go to Aministration > Site building > Themes. Click the “Create Zen subtheme” tab.
5. Fill out the form elements on this page. Initially you'll only see some basic controls, but you can open up the “More options” fieldset for more tasty options. Click “Submit.” If all goes well, Zenophile will automatically copy and tweak the necessary files, and you'll be told that your new theme was created.
6. If speed is of high concern for the site to which you have installed Zenophile, you may wish to deactivate the module after you're done creating new themes.

Permissions issues

Quickstart Links

For anyone looking to quickly make some simple changes to their theme, checkout these links:

How to Customize Your Front Page
http://drupal.org/node/317461

Tutorial - Garland Simple Modification
http://venturacottage.com/tutorials01/garlandmod2.htm

Drupal Theme Makeover Video Tutorial
http://gotdrupal.com/videos/drupal-theme-makeover

How to Make a Drupal Theme
http://tips.webdesign10.com/how-to-make-a-drupal-theme

Video Screencasts on Theming

There is also a collection of video screencasts relating to Drupal theming. Go here:
http://drupal.org/node/136502