The document summarizes Fusion, a base theme for Drupal sites that aims to produce sustainable themes. Fusion comes with a 960px grid, layout options, integrated Skinr styles, documentation and tools to make themes flexible and reduce repetitive work. Developers can easily create new themes with Fusion, tweak existing Skinr styles, disable unneeded ones or add their own custom styles.

1. Sustainable Theming with Fusion presented by: Sheena Donnelly - TopNotchThemes June 2, 2010

2. Introductions Hi, I’m Sheena :) Graphic Designer/Front-End Developer Working w/ Drupal for 1.5 years Working with TopNotchThemes for 6 mos. Regularly give presentations at DUGs, DrupalCon, DrupalCamps

3. What is Sustainable Theming? and why should we care?

4. Planning for the Future Building a theme that services a truly dynamic website Not making assumptions about a site’s future Giving attention to future changes to a site’s content before they’re made Making support painless Providing a better product and giving clients ownership of their website

5. How Can We Accomplish This? Create general styles first, then build up to specific styling Plan paths for adding and overriding styles Create choices for content administrators Make those choices easily accessible (UI)

6. Where Does Fusion Come In? Fusion was built by TopNotchThemes, a company that builds and sells premium Drupal themes We needed a theming system that would: Produce themes that work for a wide range of sites Cut back on repetitive theming tasks Allow non-themers the ability to tweak the layout and look of a site without CSS knowledge The Result: Fusion is a base theme that natively results in a sustainable end-product

7. What Exactly is Fusion? and what makes it so darn special?

8. Fusion is a Base Theme Built for flexibility and sustainability 960px Grid with Layout Options in UI Skinr Integration Great documentation and support http://drupal.org/project/fusion

9. 960px Grid w/ Layout Options 16/12 column layout Fluid or fixed width Sidebars split, both first or both last Configurable sidebar widths

10. 960px Grid w/ Layout Options 16/12 column layout Fluid or fixed width Sidebars split, both first or both last Configurable sidebar widths

11. 960px Grid w/ Layout Options 16/12 column layout Fluid or fixed width Sidebars split, both first or both last Configurable sidebar widths

12. 960px Grid w/ Layout Options 16/12 column layout Fluid or fixed width Sidebars split, both first or both last Configurable sidebar widths

13. 960px Grid w/ Layout Options 16/12 column layout Fluid or fixed width Sidebars split, both first or both last Configurable sidebar widths

14. Skinr Integration Are you thinking “Whoop-dee-do. I can add Skinr to any base theme” ? Fusion comes with ready-to-use Skinr styles Cut back on repetitive work. Add a few lines of custom CSS to tweak the Fusion styles to your theme Disable any unwanted Fusion styles and add your own

15. Some of Fusion’s Skinr Styles Horizontal login form Multi-column menu 2 or 3 column lists Vertical drop-down menus

16. Build Your Own Fusion Theme and get on the path to sustainability

17. Creating a Subtheme Similar to creating a sub theme for any other Drupal theme Copy fusion_starter directory from fusion into sites/all/thems Rename some things (theme directory, .info file, CSS file) Update content in .info file Enable Fusion and your new theme Get Details: http://fusiondrupalthemes.com/support/theme-developers/subtheming-quickstart

18. Tweaking Fusion’s Skinr Styles Just add CSS! Your theme’s CSS files will override Fusion core’s styles. Tweak slightly with updated colors and fonts Or completely change the style

19. Disabling Fusion’s Skinr Styles Find the set of styles in Fusion Core’s .info file Copy the styles to your theme’s .info Remove / tweak individual options Or remove the entire set

20. Disabling Fusion’s Skinr Styles Find the set of styles in Fusion Core’s .info file Copy the styles to your theme’s .info Remove / tweak individual options Or remove the entire set

21. Disabling Fusion’s Skinr Styles Find the set of styles in Fusion Core’s .info file Copy the styles to your theme’s .info Remove / tweak individual options Or remove the entire set

22. Adding Custom Skinr Styles Define the style in your .info file Enable the style on a block, view or panel Add CSS

23. Adding Custom Skinr Styles Define the style in your .info file Enable the style on a block, view or panel Add CSS

24. Adding Custom Skinr Styles Define the style in your .info file Enable the style on a block, view or panel Add CSS

25. Adding Custom Skinr Styles Define the style in your .info file Enable the style on a block, view or panel Add CSS

26. Adding Custom Skinr Styles Define the style in your .info file Enable the style on a block, view or panel Add CSS

27. Adding Custom Skinr Styles Define the style in your .info file Enable the style on a block, view or panel Add CSS

28. Continuing Ed. Documentation and Resources

29. Fusion Documentation Standard Documentation http://fusiondrupalthemes.com/support/documentation How to Create a Custom Grid for Fusion http://fusiondrupalthemes.com/support/theme-developers/grid-concepts/creating-custom-grid-definition Developer Center http://fusiondrupalthemes.com/developers

30. Get More Help Fusion Forums http://fusiondrupalthemes.com/forum/using-fusion TopNotchThemes on IRC http://drupal.org/irc #topnotchthemes Fusion Issue Queue http://drupal.org/project/issues/fusion

31. Fusion Downloads Fusion Core http://drupal.org/project/fusion Free Fusion Subthemes from TNT http://drupal.org/project/acquia_marina http://drupal.org/project/acquia_prosper http://drupal.org/project/acquia_slate http://drupal.org/project/magazeen Fusion Distro http://drupal.org/project/fusion_distro

32. Get a Fusion Demo Site http://www.webenabled.com/application/tnt-fusion