Fusion Theming System with Skinr module

At the end of this article, we’re going to give you a brief reference to the Fusion Theming System. It was introduced only a few months ago and it’s still under heavy development. It’s a base theme, meaning that you can create your own subthemes easily, using the Fusion Starter, a commented starter theme created especially for this reason. It uses a 960px or fluid 16-column grid, and its main advantage is that, with the help of Skinr module, it creates l ayout and style confi guration options that the site administrator can control using the website’s User Interface, without messing with CSS. So, let’s see how to install it, and how to use it for simple customizations.

1. First navigate to http://drupal.org/project/skinr, and right after you download the module, upload and unzip to your site folder (/sites/all/modules). Then, activate the module from Administration | Site building | Modules.
2. Navigate to http://drupal.org/project/fusion, and right after you download the theme, upload it and unzip it to your site folder (/sites/all/themes). Then, go to Administration | Site building | Themes, enable both Fusion Core and Fusion Starter themes and set the Fusion Starter theme as the default one.
3. Browse to admin | build | themes | settings | fusion_starter to configure the settings of Fusion Starter theme. There you will find the default settings of every Drupal theme, such as logo image settings or shortcut icon settings. However, there is also a new section, named Fusion theme settings. There, you can easily change the basic styles and the layout of your theme, such as font family, font size, fixed or fluid layout without using any CSS at all. Click on Save configuration to store your settings.

   

4. Now, if you hover the cursor over any block of your site, you will see a new icon. Clicking on it allows you to configure the properties of this block. You can change the width of the block, the block position, the content alignment, and apply custom styles to the elements of the block, such as padding, border, equal heights, or multi-column menus.

   

5. There are also special settings for every content type. For example, if you go to Administer | Content Management | Content Types | Product, you will see two new sections, named Skinr node settings and Skinr comment settings, where you can apply custom styles to the product page and the product comments.

If you want to create your own custom styles for your theme, and present them in the User Interface, you have to study the documentation of the Skinr module, available at http://www.drupal.org/node/578574.