Sustainable Drupal Theming with Fusion
Upcoming SlideShare
Loading in...5
×
 

Sustainable Drupal Theming with Fusion

on

  • 2,889 views

An introduction to the Fusion base theme system and how it can create flexible, sustainable theme solutions.

An introduction to the Fusion base theme system and how it can create flexible, sustainable theme solutions.

Statistics

Views

Total Views
2,889
Views on SlideShare
2,877
Embed Views
12

Actions

Likes
4
Downloads
47
Comments
0

2 Embeds 12

http://worldofdrupal.local 10
http://nextleveldrupal.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • You can also use arbitrary indents (like 960.gs's push/pull) if you want to manually indent a block to a certain grid position
  • Subtheme upgrade docs are on site, more as we upgrade contrib themes first Fairly straight port to 7.x-1.x branch, taking advantage of simple D7 updates where possible (simplifying template.php, region styles for primary links) but not a major overhaul Then 2.x branch where we'd like to move more of our custom theme settings/layout into Skinr styles Already started a repository, but more coming Skinr 2.x lets you apply page styles based on path, but we think there's a great opportunity for Context-aware styles here, and being able to package up configuration in different ways At some point, Fusion's layout and Panels' flexible layout converge – our time may be better spent working on Panels + grid support
  • Fusion PRO has been very successful Contact us if you'd like to talk about access to our entire catalog through partner program – not for reselling, but companies looking to integrate Fusion themes into their product/service offering, purchasing a dozen or more themes per year

Sustainable Drupal Theming with Fusion Sustainable Drupal Theming with Fusion Presentation Transcript

  • Sustainable Theming with Fusion presented by: Sheena Donnelly – TopNotchThemes Follow along w/ a free demo site: http://www.webenabled.com/application/tnt-fusion
  • 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
  • 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?
  • 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
  • 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?
  • 960px Grid w/ Layout Options
    • 16/12 column layout
    • Fluid or fixed width
    • Sidebars split, both first or both last
    • Configurable sidebar widths
  • 960px Grid w/ Layout Options
    • 16/12 column layout
    • Fluid or fixed width
    • Sidebars split, both first or both last
    • Configurable sidebar widths
  • 960px Grid w/ Layout Options
    • 16/12 column layout
    • Fluid or fixed width
    • Sidebars split, both first or both last
    • Configurable sidebar widths
  • 960px Grid w/ Layout Options
    • 16/12 column layout
    • Fluid or fixed width
    • Sidebars split, both first or both last
    • Configurable sidebar widths
  • 960px Grid w/ Layout Options
    • 16/12 column layout
    • Fluid or fixed width
    • Sidebars split, both first or both last
    • Configurable sidebar widths
  • 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
  • Fusion Regions header search sidebar content footer header login sidebar content footer header sidebar content footer banner header content footer sidebar
  • 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
  • Quick Demo Let’s see Fusion’s power in action
  • 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
  • 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
  • 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
  • Adding Custom Skinr Styles
    • Define the style in your .info file
    • Enable the style on a block, view or panel
    • Add CSS
  • Adding Custom Skinr Styles
    • Define the style in your .info file
    • Enable the style on a block, view or panel
    • Add CSS
  • Adding Custom Skinr Styles
    • Define the style in your .info file
    • Enable the style on a block, view or panel
    • Add CSS
  • Adding Custom Skinr Styles
    • Define the style in your .info file
    • Enable the style on a block, view or panel
    • Add CSS
  • 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
  • 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
  • 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
  • Fusion Documentation
    • Standard Documentation http://fusiondrupalthemes.com/support/documentation
    • How to Create a Custom Grid for Fusion http://fusiondrupalthemes.com/support/theme-developers/grid-concepts/creating-custom-grid-definition
    • Developer Center http://fusiondrupalthemes.com/developers
  • Get More Help
    • Fusion Forums http://fusiondrupalthemes.com/forum/using-fusion
    • TopNotchThemes on IRC http://drupal.org/irc #topnotchthemes
    • Fusion Issue Queue http://drupal.org/project/issues/fusion
  • Fusion Downloads
    • Fusion Core http://drupal.org/project/fusion
    • Free Fusion Subthemes from TNT http://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
  • Get a Fusion Demo Site
    • http://www.webenabled.com/application/tnt-fusion