sustainable drupal theming with fusion
DESCRIPTION
An introduction to the Fusion base theme system and how it can create flexible, sustainable theme solutions.TRANSCRIPT
Sustainable Theming with Fusion
presented by:
Sheena Donnelly – TopNotchThemes
Follow along w/ a free demo site:http://www.webenabled.com/application/tnt-fusion
http://fusiondrupalthemes.com
Introductions
TopNotchThemes
The first all-Drupal premium theme
providers
Fusion is our new line of products!
http://fusiondrupalthemes.com
Support for themers using Fusion
http://fusiondrupalthemes.com/join-fusion-pro
http://fusiondrupalthemes.com
Fusion Pro Service
One Year Subscription $495 ($795 value) 2-for-1 theme licenses
First-priority support
Private forums
One-on-One access to our professional
theming team (i.e. I will write CSS for
you)
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
Who is Fusion For?
Non-themers
Easy CSS-only theming
Bulletproof cross-
browser layouts
through Drupal's UI
Grid enforces design
consistency
Free & commercial
support
Developers &
Themers
Rapid prototyping
Decouple workflow
Grids without the math
Stop reinventing the
wheel
Sustainable theming
Easier maintenance
Fusion’s Features
What makes it different?
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
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
header
search
sidebar content
footer
header
login
sidebar
content
footer
header
sidebar
content
footer
banner
header
content
footersideba
r
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
Quick Demo
Let’s see Fusion’s power in
action
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/subthemi
ng-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
What’s in Store
Looking ahead to
Fusion’s future
http://fusiondrupalthemes.com
Fusion: the base theme
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
TopNotchThemes: Our Goals
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.
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-dev
elopers/grid-concepts/creating-custom-grid-defi
nition
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