Upload
sheenadonnelly
View
1.204
Download
1
Embed Size (px)
DESCRIPTION
Presentation
Citation preview
Sustainable Theming with Fusion
presented by:
Sheena Donnelly - TopNotchThemesJune 2, 2010
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
What is Sustainable Theming?
and why should we care?
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
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)
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
What Exactly is Fusion?
and what makes it so darn special?
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
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
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
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
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
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
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 drop-down
menus
Build Your Own Fusion Theme
and get on the path to sustainability
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
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
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
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
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
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
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
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
Adding Custom Skinr Styles
Define the style in
your .info file
Enable the style on a
block, view or panel
Add CSS
Continuing Ed.
Documentation and Resources
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
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
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
http://fusiondrupalthemes.com
Get a Fusion Demo Site
http://www.webenabled.com/application/tnt-fusion