Subtheming quickstart

Currently there are two ‘starter’ subthemes available for Fusion: Fusion Starter and Fusion Starter Lite. Which one should you choose when creating your own custom subtheme? Well, that depends!

If you have no idea what any of this means and want something simple to start with – go for the Lite version. Similarly, if you’re an advanced themer and know what you’re doing, and only want to include parts of Fusion as you need it, start with Lite.

If you want to see all the bells and whistles of what Fusion can do, go with Fusion Starter!

Of course in reality this is a continuum, and the list below just reflects the out-of-the-box defaults in each. You can always start with Lite and copy additional settings from Starter as needed, or remove code from Starter.

Here are the differences between the two:

Sometimes you need to override a template (tpl) file in your theme to add the content or styling you need if it is not a change that can be made in pure CSS.

For example, we want to add the number of comments next to the title of the comments area so it looks like “4 Comments” rather than just reading “Comments”.

We need to override the contents of the “comment-wrapper.tpl.php” file that came with your Fusion based theme. If no such file came with your sub theme, you can copy the original copy of it from the Fusion Core theme folder to your sub theme’s folder. Open the newly added or existing “comment-wrapper.tpl.php” file and replace the code within it with this:

What we’re doing there is saying: if there are comments, show the comment count next to the text “Comments”. So if there are four comments, the title for the comments are will read “4 Comments” rather than just “Comments”.

Remember that after making changes to an existing *.tpl.php file or adding a new *.tpl.php file, you need to clear the site cache on the Performance page. That reloads the theme’s files and loads the changes that have been made.

Other template files

The same idea applies to changes made to theme files such as the “block.tpl.php”, “node.tpl.php”, and the “page.tpl.php”. Not all sub themes come with these files so if you need to make changes to these files but they don’t exist, you can copy them over from the Fusion Core theme’s folder to your sub theme’s folder. Since all Fusion based sub themes use the Fusion Core *.tpl.php files this is a safe method at making such changes without altering Fusion Core.

Of course Fusion doesn’t include all possible template files, so you can add any tpl files from Drupal itself or various modules by copying these from the original folder into your sub theme’s folder.

template.php

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

There are quite a few body classes that are added to the theme based one what content is present and the configuration of your site. These are very helpful when you want to change a specific element on a specific page.

When viewing a page take a look at the HTML source it generates. You should see a bit of HTML like this for the body id/class.

Each piece of that HTML is dynamically generated based on the content that is presented on the current page as well as the layout configuration. Let’s break down each element of the HTML above so we know what is going on with this page.

body id=”pid-node-94”
This is a dynamically created page id based on the node id of this specific page. Judging by the body id here we can also tell that the URL to access this node is /node/94 as “pid” is short for “page id” and “node-94” is the same as the URL of ”/node/94”.

class=”not-front”
This is saying that we are not on the front page.

class=”logged-in”
This is saying that we are currently logged in to the site.

class=”page-node”
We are currently on a node page. If we were on the /admin page it would read “page-admin” instead.

class=”node-type-blog”
This is saying that the node type being viewed is a Blog. If we were viewing a Story node it would read “node-type-story” instead.

class=”full-node”
We are currently viewing a full node rather than a teaser listing.

class=”layout-first-main-last”
This means that the current layout is set up so there are three columns including the “Sidebar first”, “Main”, and “Sidebar last”. There are four options for column layouts with a Fusion based theme.

Options include no sidebars and just one main column “layout-main”, sidebar first and then main “layout-first-main”, main and then sidebar last “layout-main-last”, and then all three columns sidebar first and main and sidebar last “layout-first-main-last”.

class=”sidebars-split”
This means that the current layout has split sidebars. Meaning that the sidebars are not next to each other. The layout would be a three column layout with sidebars on the two outside columns and the main content area in the middle.

Other options are both sidebars first “sidebars-first” or both sidebars last “sidebars-last”.

class=”grid-type-960”
This is the default grid type with a width of 960. You can add your own grid layout to your Fusion sub theme and this is where it is stating which grid is currently being used.

class=”grid-width-16”
By default Fusion Core supports the 16 grid width as well as the 12 grid width layout. In your sub theme you can manually specify which grid to use.

class=”panels”
Not shown in the example above, but a panels class will be added when you’re on a Panels-enabled page.

Styling with body classes

Say you want to change the border color for the teaser on the homepage in the main content area only:

That would set the bottom border on the homepage teaser in the main content area to black. All other pages would be unaffected as we are using the body classes given to us by the theme to add a bottom border to the teaser listing on the front page only.