90 minute introduction to the fusion theming framework for drupal
DESCRIPTION
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 SkinrTRANSCRIPT
![Page 1: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/1.jpg)
90 Minute Introduction to the Fusion Theming Framework for Drupal
Bryan House
Sr. Director, Marketing Acquia
@bryanhouse
Stephanie Pakrul Co-Founder
Top Notch Themes
@topnotchthemes
![Page 2: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/2.jpg)
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
![Page 3: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/3.jpg)
Drupal Theming with Fusion
presented by:
Stephanie Pakrul - TopNotchThemes
June 17, 2010
![Page 4: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/4.jpg)
http://fusiondrupalthemes.com
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
![Page 5: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/5.jpg)
Quick demo!
![Page 6: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/6.jpg)
http://fusiondrupalthemes.com
Who is Fusion for?
Developers & Themers
Rapid prototyping
Decouple workflow
Grids without the math
Stop reinventing the wheel
Sustainable theming
Easier maintenance
Non-themers
Easy CSS-only theming
Bulletproof cross-browser
layouts through Drupal's UI
Grid enforces design
consistency
Free & commercial support
![Page 7: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/7.jpg)
What is Fusion?
and how can it make my life easier?
![Page 8: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/8.jpg)
http://fusiondrupalthemes.com
What is Fusion?
FUSION SUBTHEME
SKINR MODULEGRID
FUSION CORE Base theme
960.gs-style CSS grid
Exposes UI options
Inherits from Fusion Core
![Page 9: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/9.jpg)
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!
![Page 10: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/10.jpg)
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
![Page 11: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/11.jpg)
Layout in Fusion
css grids, without the headache
![Page 12: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/12.jpg)
http://fusiondrupalthemes.com
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
![Page 13: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/13.jpg)
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
![Page 14: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/14.jpg)
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
![Page 15: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/15.jpg)
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
![Page 16: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/16.jpg)
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
![Page 17: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/17.jpg)
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
![Page 18: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/18.jpg)
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
![Page 19: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/19.jpg)
http://fusiondrupalthemes.com
Fusion Regions
header
search
side
bar
content
footer
header
login
side
bar content
footer
header
side
barcontent
footer
banner
header
content
footer
side
bar
![Page 20: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/20.jpg)
Skinr in Fusion
style once, reapply liberally
![Page 21: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/21.jpg)
http://fusiondrupalthemes.com
Why Skinr?
Skinr provides the user
interface for styles
Build modular,
extensible styles
Share styles across
different types of
content
![Page 22: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/22.jpg)
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
![Page 23: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/23.jpg)
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
![Page 24: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/24.jpg)
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)
![Page 25: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/25.jpg)
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
![Page 26: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/26.jpg)
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
![Page 27: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/27.jpg)
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
![Page 28: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/28.jpg)
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
![Page 29: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/29.jpg)
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
![Page 30: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/30.jpg)
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
![Page 31: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/31.jpg)
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
![Page 32: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/32.jpg)
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
![Page 33: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/33.jpg)
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
![Page 34: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/34.jpg)
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
![Page 35: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/35.jpg)
Sites using Fusion
in the wild...
![Page 36: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/36.jpg)
http://fusiondrupalthemes.com
Sites using Fusion
Interaction Design Associationhttp://www.ixda.org
StatusNethttp://status.net
Intelligent Utilityhttp://www.intelligentutility.com
Chiyopiahttp://www.chiyopia.com
RheumMDhttp://rheummd.org
Kinetex Resources Corporationhttp://www.kinetex.ca
![Page 37: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/37.jpg)
Coding time!
time to roll up our sleeves...
![Page 38: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/38.jpg)
http://fusiondrupalthemes.com
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
![Page 39: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/39.jpg)
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.
![Page 40: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/40.jpg)
Continuing Ed.
Documentation and Resources
![Page 41: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/41.jpg)
http://fusiondrupalthemes.com
Fusion Documentation
User Documentationhttp://fusiondrupalthemes.com/support/documentation
How to Create a Custom Grid for Fusionhttp://fusiondrupalthemes.com/support/theme-developers/grid-
concepts/creating-custom-grid-definition
Developer Centerhttp://fusiondrupalthemes.com/developers
![Page 42: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/42.jpg)
http://fusiondrupalthemes.com
Get More Help
Fusion Forumshttp://fusiondrupalthemes.com/forum/using-fusion
TopNotchThemes on IRChttp://drupal.org/irc
#topnotchthemes
Fusion Issue Queuehttp://drupal.org/project/issues/fusion
![Page 43: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/43.jpg)
http://fusiondrupalthemes.com
Fusion Downloads
Fusion Corehttp://drupal.org/project/fusion
Free Fusion Subthemes from TNThttp://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
![Page 44: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/44.jpg)
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
![Page 45: 90 Minute Introduction to the Fusion Theming Framework for Drupal](https://reader033.vdocument.in/reader033/viewer/2022042713/547e9fb9b4af9fa0158b56a4/html5/thumbnails/45.jpg)
Thanks!
Q&A