More docs on custom Drupal subtheming with Fusion and theming support forum

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.

name = Fusion Starter
description = Fusion Starter sub-theme for Drupal 6.
base theme = fusion_core
core = 6.x
engine = phptemplate

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

The path to your sub-theme's main CSS file. They are in a separate folder to keep things tidy. You can also add other CSS files here if you prefer to divide them further.

regions[sidebar_first] = sidebar first
regions[sidebar_last] = sidebar last
regions[header_top] = header top
regions[header] = header
regions[preface_top] = preface top
regions[preface_bottom] = preface bottom
regions[content_top] = content top
regions[content] = content
regions[content_bottom] = content bottom
regions[postscript_top] = postscript top
regions[postscript_bottom] = postscript bottom
regions[footer] = footer
regions[node_top] = node top
regions[node_bottom] = node bottom

All the regions from Fusion Core. Unfortunately sub-theme inheritance is a bit broken in Drupal 6, so we have to duplicate all the available regions here. If you want to add or remove regions listed here, you'll need to remove them from the info, plus copy over the page.tpl.php and head.php from Fusion Core and make your changes in the sub-theme's copy of page.tpl.php.

features[] = logo
features[] = name
features[] = slogan
features[] = node_user_picture
features[] = comment_user_picture
features[] = search
features[] = favicon
features[] = primary_links
features[] = secondary_links

These are Drupal's standard theme settings. We're copying them into the sub-theme's info file because Fusion does not natively support the mission statement setting, in favor of the Drupal 7-esque approach of simply using a block/region for this. In Drupal 6, if you use a set of features other than the full range of defaults, these are not inherited from the base theme.

; Default theme settings
settings[theme_grid] = grid16-960
settings[fluid_grid_width] = fluid-100
settings[theme_font_size] = font-size-12
settings[sidebar_layout] = sidebars-split
settings[sidebar_first_width] = 3
settings[sidebar_last_width] = 3

This is where things get interesting! These are the theme settings defaults for Fusion's own theme settings for layout and font sizes. They can be overridden using the theme configuration settings, but a default should be set for your sub-theme. The full range of possible default values can be found here.

; Inherit Skinr styles from Fusion Core
skinr[options][inherit_skins] = true

This line simply tells your sub-theme to also use all the Skinr styles from Fusion Core, such as block widths, alignment, and menu styles.

; Sample Skinr style (uncomment to use, see Skinr section in CSS)
;skinr[fusion-example-styles][title] = Sample Skinr block styles
;skinr[fusion-example-styles][type] = checkboxes
;skinr[fusion-example-styles][features][] = block
;skinr[fusion-example-styles][options][1][label] = My sample Skinr style
;skinr[fusion-example-styles][options][1][class] = fusion-example-stylename

This is meant to get you started writing your first custom Skinr style for Fusion. More information on this is below.

The grid

Fusion Core does a bunch of complicated math behind the scenes so you don't have to worry about layout, and the theme will adapt automatically.

Needs more here...

Creating Skinr styles

The Skinr docs give lots of detailed explanations and examples for creating your own theme styles: http://drupal.org/node/578574

Also see some concepts and examples below in terms of how they apply to Fusion.

Important Fusion concepts and examples

At this point you should have read the Fusion configuration docs and understand the default behaviour of blocks and regions.

Make sure you think about how your sub-theme's styles are either mutually exclusive or "stackable" with each other and choose form elements accordingly.

Use classes instead of IDs. Why? Styles for IDs always override classes. When you're theming a set of dynamic styles, you never know what you might be trying to override in the CSS, and a class-based Skinr style can't override a default style that's been specified using a CSS ID. If you set a font style for a region using the region ID, such as #sidebar-first { color: #fff; }, then you can't override this using a .mytheme-blue-text { color: #00f; } style.

Target the style name plus ".inner" so it only affects what's within the inner div. For example, Views adds their admin links outside the .inner div, so if you apply list or link styles, use .inner as to not affect the Views list. Example:
Don't do this: .mytheme-big-list li { font-size: 150%; }
Use this instead: .mytheme-big-list .inner li { font-size: 150%; }

If you set a background, you probably want to set a foreground too. If your regions or styles have contrasting background colors, you might end up in a situation where a light background block is placed in a dark background region. If the region has a text/link color set to white, but the block style does not have a text/link color set, then it will inherit the properties of the region. By always setting a foreground (text/link) color for a Skinr style, even if it's the page default, you ensure that text will always be legible and creating the desired effect.

Cross-browser

Fusion supports IE6, IE7, and IE8 conditional stylesheets. These should be placed in the /css folder of your subtheme and named ie6-fixes.css and so on.

Markup structure

Fusion's markup attempts to strike a balance between hiding unnecessary (to most sub-themers) details while still keeping page.tpl.php understandable and pliable for those with some familiarity with Drupal and HTML.

Entities in Fusion (regions, blocks, and special variables such as primary links or footer message) have two containing <div> tags. A third outer wrapper div is added if the area may go 'full width', ie. there may be a background style that needs to expand to the full width of the browser viewport, regardless of the content width.

Theme functions are used in Fusion Core to accomplish the math behind the grid, without requiring themers to do manual calculations. This also enables Fusion to be dynamic, adapting to the layout and block settings, and even to hot-swappable grid columns or fixed vs. fluid width.

Here is an example of the footer message:

<div id="footer-message-wrapper" class="footer-message-wrapper full-width">
  <div id="footer-message" class="footer-message row <?php print $grid_width; ?>">
    <div id="footer-message-inner" class="footer-message-inner inner">
      <?php print theme('grid_block', $footer_message, 'footer-message-text'); ?>
    </div><!-- /footer-message-inner -->
  </div><!-- /footer-message -->
</div><!-- /footer-message-wrapper -->

The footer-message-wrapper div is there in case you want to add a background spanning the full page width. The footer-message div is the standard container for targeting content-width backgrounds or other styling. The footer-message-inner is crucial when working with a grid system so that you can place styling such as borders or padding onto the block or container without overflowing the grid.

Here is an example style which would add a border, background, and padding:

.mytheme-lightgraybackground-border .inner {
  background-color: #f7f7f7;
  border: 1px solid #ededed;
  color: #535353;
  padding: 20px;
}

Adding template.php code, tpl.php files, etc. to your subtheme

You can add template files as needed to your subtheme. By default, it inherits the template files from Fusion Core.

To add template.php code, simply create a new template.php file in your subtheme and add the necessary code. It will automatically run Fusion's template.php file as well.

Other stuff to cover here:
- typography
- overflow
- grid row vs grid block
- module support, Ubercart
- adding more files to subtheme (template.php, node tpls, etc)
- advanced Fusion info: theme functions, calculations, alternate grids

A note about sub-sub-theming

Right now we can't recommend trying to sub-theme a Fusion sub-theme (e.g., Acquia Prosper) in Drupal 6 until a patch to fix the "Theme settings forms are not inherited by sub-themes" issue (http://drupal.org/node/481142) is committed to core.  Once that patch is committed, unlimited levels of theme inheritance should be possible.

While it might be possible to sub-theme a Fusion sub-theme right now, at a minimum it requires replicating the theme-settings.php file from Fusion Core, and probably more. The Drupal 7 version of Fusion should have no trouble being sub-themed to any level.