How to create a sub-theme

Copy the fusion_starter folder from Fusion and rename to the name of your choice (eg. "mysite_theme")

Rename the .info file to the same name you just gave the folder

Open the .info file and you can give your theme a more descriptive name and full description here

On this line stylesheets[all][] = css/fusion-starter-style.css, replace the "fusion-starter" part with your theme's name

Rename the css file in the css/ folder to match

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.

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.

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.

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.

Creating Skinr styles

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.

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:

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.

Comments

First, I think its pure laziness to miss indicating you must both "enable" and make "default" your new sub-theme. hehe6. Upload to your site and enable Fusion Core and your new theme on admin/build/themes!

Also, I found it necessary to prefix the subtheme with "fusion_" instead of "mysite_".1. Copy the fusion_starter folder from Fusion and rename to the name of your choice (eg. "mysite_theme")

So, let that be a lesson. And, now we can get on to the more devilish task of making our sites look fantastic.
Good Luck All!
Xtian