Drupaldojo june2010

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?


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


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)


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?


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


960px Grid w/ Layout Options

16/12 column layout

Fluid or fixed width

Sidebars split, both first

or both last

Configurable sidebar

widths



16/12 column layout



or both last


widths



16/12 column layout



or both last


widths



16/12 column layout


Sidebars split, both

first or both last


widths



16/12 column layout



or both last

Configurable

sidebar widths


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


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


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


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


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














Adding Custom Skinr Styles

Define the style in

your .info file

Enable the style on a

block, view or panel

Add CSS



Define the style in

your .info file



Add CSS



Define the style in

your .info file



Add CSS



Define the style in

your .info file



Add CSS



Define the style in

your .info file



Add CSS



Define the style in

your .info file



Add CSS

Continuing Ed.

Documentation and Resources


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/support/documentation

http://fusiondrupalthemes.com/support/theme-developers/grid-concepts/creating-custom-grid-definition

http://fusiondrupalthemes.com/developers


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/forum/using-fusion

http://drupal.org/irc

http://drupal.org/project/issues/fusion


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://drupal.org/project/fusion

http://drupal.org/project/acquia_marina

http://drupal.org/project/acquia_prosper

http://drupal.org/project/acquia_slate

http://drupal.org/project/magazeen

http://drupal.org/project/fusion_distro


Get a Fusion Demo Site

http://www.webenabled.com/application/tnt-fusion

Technology

Drupaldojo june2010