Fusion is a powerful Drupal grid theme framework with point-and-click layouts & built in styles for Blocks, Views, and other modules. Learn how to unlock more of Drupal's potential with Fusion theming without needing to be a coder. Over 7000 sites today are using Fusion – join us and see why. Key takeaways will include: - A review of Fusion and Skinr key features - How to build more flexible themes faster, without reinventing the wheel - How to harness the power of Fusion to build themes faster and simplify future changes - A tour of Drupal sites built using Fusion and Skinr

1. 90 Minute Introduction to the Fusion Theming
Framework for Drupal
Stephanie Pakrul Bryan House
Co-Founder Sr. Director, Marketing
Top Notch Themes Acquia
@topnotchthemes @bryanhouse

2. Upcoming Webinars
Thursday July 29th
– How Drupal 7 - The Top 40 Core Modules and What They
Mean for You
Register Today - http://acquia.com/webinars

3. Drupal Theming with Fusion
presented by:
Stephanie Pakrul - TopNotchThemes
June 17, 2010

4. Introductions
 Hi, I’m Stephanie
 Co-founder of TopNotchThemes
 Building Drupal themes for over 4 years
 Launched the first all-Drupal premium theme store
in 2008
http://fusiondrupalthemes.com

5. Quick demo!

6. Who is Fusion for?
Non-themers Developers & Themers
 Easy CSS-only theming  Rapid prototyping
 Bulletproof cross-browser  Decouple workflow
layouts through Drupal's UI  Grids without the math
 Grid enforces design  Stop reinventing the wheel
consistency
 Sustainable theming
 Free & commercial support
 Easier maintenance
http://fusiondrupalthemes.com

7. What is Fusion?
and how can it make my life easier?

8. What is Fusion?
FUSION CORE Base theme
960.gs-style Exposes UI
CSS grid GRID SKINR MODULE options
Inherits from
FUSION SUBTHEME Fusion Core
http://fusiondrupalthemes.com

9. A Next Generation Base Theme
 Lots of helpful classes and wrappers
 Integrated Superfish for dropdown menus
 Accessible, SEO-friendly, supports RTL
 Well commented with scaffolding CSS
 Helpful styling for popular modules
 A team of awesome themers behind it!
http://fusiondrupalthemes.com

10. 5 Steps to Build a Fusion Theme
 Copy & rename fusion_starter subtheme
 Set up basic layout through .info file and/or Drupal UI
 Do general theming in CSS – basic typography,
backgrounds, etc.
 Create Skinr styles in .info file and CSS for blocks, Views,
content types, and more
 Apply these to your content through Skinr's UI
http://fusiondrupalthemes.com

11. Layout in Fusion
css grids, without the headache

12. What's a CSS Grid?
 System of CSS classes to
define layout
 Enforces visual consistency
 Fusion exposes a grid
system through Drupal's UI
 Easily create custom grids
 Further reading about grids:
http://bit.ly/bFQLHi
http://fusiondrupalthemes.com

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

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

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

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

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

18. Fusion Regions
 Lots of collapsible regions
 Use block visibility, widths, and position to create
thousands of possible layouts
 Blocks will divide equally per region to fill their row
 You can override widths manually or set a block to
drop to a new row
http://fusiondrupalthemes.com

19. Fusion Regions
search login header header
header header banner
content
sidebar
content content
sidebar
sidebar
sidebar
content
footer footer footer footer
http://fusiondrupalthemes.com

20. Skinr in Fusion
style once, reapply liberally

21. Why Skinr?
 Skinr provides the user
interface for styles
 Build modular,
extensible styles
 Share styles across
different types of
content
http://fusiondrupalthemes.com

22. 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
http://fusiondrupalthemes.com

23. Some of Fusion’s Skinr Styles
 Horizontal login form
 Multi-column menu
 2 or 3 column lists
 Vertical dropdowns
 jQuery Equal Heights
http://fusiondrupalthemes.com

24. More Skinr Features
 Apply multiple classes with one skin
 Conditionally load CSS, JS, or a custom .tpl.php file
 Import/export styles in bulk
 Resizable modal with live previews (2.x only)
 Page-level (2.x) and region-level (D7) skins
 Skin sets can also live in sites/*/skins with their own
.info files and be enabled/disabled like modules (2.x)
http://fusiondrupalthemes.com

25. 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
http://fusiondrupalthemes.com

26. 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
http://fusiondrupalthemes.com

27. 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
http://fusiondrupalthemes.com

28. 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
http://fusiondrupalthemes.com

29. Adding Custom Skinr Styles
 Define the style in
your .info file
 Enable the style on a
block, view or panel
 Add CSS
http://fusiondrupalthemes.com

30. Adding Custom Skinr Styles
 Define the style in
your .info file
 Enable the style on a
block, view or panel
 Add CSS
http://fusiondrupalthemes.com

31. Adding Custom Skinr Styles
 Define the style in
your .info file
 Enable the style on a
block, view or panel
 Add CSS
http://fusiondrupalthemes.com

32. Adding Custom Skinr Styles
 Define the style in
your .info file
 Enable the style on a
block, view or panel
 Add CSS
http://fusiondrupalthemes.com

33. Adding Custom Skinr Styles
 Define the style in
your .info file
 Enable the style on a
block, view or panel
 Add CSS
http://fusiondrupalthemes.com

34. Adding Custom Skinr Styles
 Define the style in
your .info file
 Enable the style on a
block, view or panel
 Add CSS
http://fusiondrupalthemes.com

35. Sites using Fusion
in the wild...

36. Sites using Fusion
Interaction Design  Chiyopia
Association http://www.chiyopia.com
http://www.ixda.org
 RheumMD
StatusNet
http://rheummd.org
http://status.net
 Kinetex Resources
Intelligent Utility Corporation
http://www.intelligentutility.com http://www.kinetex.ca
http://fusiondrupalthemes.com

37. Coding time!
time to roll up our sleeves...

38. Looking Ahead – Fusion
 Drupal 7 version in dev – straight port first, then 2.x
 Moving theme settings into Skinr styles
 Community repository of skin sets
 Better Context/Spaces/Features integration
 Better support of Panels
http://fusiondrupalthemes.com

39. Looking Ahead – TopNotchThemes
 Launch of PowerSites for all premium themes
 Expecting to complete TNT theme upgrades this fall
 Expanding Fusion PRO
 Currently finalizing initial version of a partner program
 More documentation, screencasts, etc.
http://fusiondrupalthemes.com

40. Continuing Ed.
Documentation and Resources

41. Fusion Documentation
 User 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
http://fusiondrupalthemes.com

42. 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
http://fusiondrupalthemes.com

43. 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
http://fusiondrupalthemes.com

44. Get a Fusion Demo Site
Get a copy of the Magazeen theme demo site used in
today's webinar at:
http://www.webenabled.com/application/tnt-fusion
http://fusiondrupalthemes.com

45. Thanks!
Q&A