Creating your own Fusion subtheme (Drupal 7)

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

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.

You’ll want to make sure you add support for Fusion Accelerator to take advantage of easily applied skins for Fusion sub-themes.

fusion[api] = 2
fusion[directory] = skins

Next we have all the regions from Fusion Core.

regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second
regions[header_top] = Header top
regions[header] = Header
regions[main_menu] = Main menu
regions[preface_top] = Preface top
regions[preface_bottom] = Preface bottom
regions[content] = Content
regions[postscript_top] = Postscript top
regions[postscript_bottom] = Postscript bottom
regions[footer] = Footer
regions[node_top] = Node top
regions[node_bottom] = Node bottom
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom

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.

Next, we have Drupal’s standard theme settings, as defined in Drupal 7. The mission statement setting is no longer available, as Drupal 7 opts for simply using a block or region for this.

features[] = logo
features[] = name
features[] = slogan
features[] = node_user_picture
features[] = comment_user_picture
features[] = favicon

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.

Fusion also allows you to configure regions in conjunction by nesting them.

Fusion’s regions will adjust themselves based on the size of other regions as well, even if you don’t specifically define them. Here are some suggestions that Fusion uses to do that:

You can also group regions, which will also adjust. Fluid layouts has settings to adjust to the various region settings and will subtract when necessary also. Please see the theme info file for the details.

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. You can read more details on how this is done or on creating your own custom grid definition in our documentation

.

Creating Skins with Fusion Apply

Fusion Apply is part of Fusion Accelerator.
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 IE7, IE8, and IE9 via the No Conditional Styles OR CSS Hacks method in Drupal 7, which implements conditional code in the html.tpl.php file. For details on how this is implemented, please see this issue.

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 style which would add a border, background, and padding:

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, Drupal Commerce
• adding more files to subtheme (template.php, node tpls, etc)