drupaldojo june2010
DESCRIPTION
PresentationTRANSCRIPT
![Page 1: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/1.jpg)
Sustainable Theming with Fusion
presented by:
Sheena Donnelly - TopNotchThemesJune 2, 2010
![Page 2: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/2.jpg)
http://fusiondrupalthemes.com
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
![Page 3: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/3.jpg)
What is Sustainable Theming?
and why should we care?
![Page 4: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/4.jpg)
http://fusiondrupalthemes.com
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
![Page 5: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/5.jpg)
http://fusiondrupalthemes.com
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)
![Page 6: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/6.jpg)
http://fusiondrupalthemes.com
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
![Page 7: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/7.jpg)
What Exactly is Fusion?
and what makes it so darn special?
![Page 8: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/8.jpg)
http://fusiondrupalthemes.com
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
![Page 9: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/9.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 10: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/10.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 11: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/11.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 12: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/12.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 13: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/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: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/14.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 15: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/15.jpg)
http://fusiondrupalthemes.com
Some of Fusion’s Skinr Styles
Horizontal login form
Multi-column menu
2 or 3 column lists
Vertical drop-down
menus
![Page 16: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/16.jpg)
Build Your Own Fusion Theme
and get on the path to sustainability
![Page 17: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/17.jpg)
http://fusiondrupalthemes.com
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
![Page 18: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/18.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 19: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/19.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 20: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/20.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 21: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/21.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 22: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/22.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 23: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/23.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 24: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/24.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 25: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/25.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 26: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/26.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 27: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/27.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 28: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/28.jpg)
Continuing Ed.
Documentation and Resources
![Page 29: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/29.jpg)
http://fusiondrupalthemes.com
Fusion Documentation
Standard 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 30: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/30.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 31: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/31.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 Distrohttp://drupal.org/project/fusion_distro
![Page 32: Drupaldojo june2010](https://reader036.vdocuments.mx/reader036/viewer/2022062320/5598c1071a28abda208b4838/html5/thumbnails/32.jpg)
http://fusiondrupalthemes.com
Get a Fusion Demo Site
http://www.webenabled.com/application/tnt-fusion