90 Minute Introduction to the Fusion Theming Framework for Drupal

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

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

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

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

Quick demo!

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

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

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

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

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

Layout in Fusion css grids, without the headache

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

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

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

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

Skinr in Fusion style once, reapply liberally

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

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

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

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

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

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

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

Sites using Fusion in the wild...

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

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

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

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

Continuing Ed. Documentation and Resources

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

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

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

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

Thanks! Q&A

http://fusiondrupalthemes.com	84
http://worldofdrupal.local	13
http://www.slideshare.net	1
http://www.webizrada.com	1
http://nextleveldrupal.com	1

90 Minute Introduction to the Fusion Theming Framework for Drupal

by Acquia

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 100

Statistics

90 Minute Introduction to the Fusion Theming Framework for Drupal Presentation Transcript