Drupaldojo june2010

1,421 views

Published on

Presentation

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,421
On SlideShare
0
From Embeds
0
Number of Embeds
68
Actions
Shares
0
Downloads
51
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Drupaldojo june2010

  1. 1. Sustainable Theming with Fusion presented by: Sheena Donnelly - TopNotchThemes June 2, 2010
  2. 2. Introductions <ul><li>Hi, I’m Sheena :) </li></ul><ul><ul><li>Graphic Designer/Front-End Developer </li></ul></ul><ul><ul><li>Working w/ Drupal for 1.5 years </li></ul></ul><ul><ul><li>Working with TopNotchThemes for 6 mos. </li></ul></ul><ul><ul><li>Regularly give presentations at DUGs, DrupalCon, DrupalCamps </li></ul></ul>
  3. 3. What is Sustainable Theming? and why should we care?
  4. 4. Planning for the Future <ul><li>Building a theme that services a truly dynamic website </li></ul><ul><li>Not making assumptions about a site’s future </li></ul><ul><li>Giving attention to future changes to a site’s content before they’re made </li></ul><ul><li>Making support painless </li></ul><ul><li>Providing a better product and giving clients ownership of their website </li></ul>
  5. 5. How Can We Accomplish This? <ul><li>Create general styles first, then build up to specific styling </li></ul><ul><li>Plan paths for adding and overriding styles </li></ul><ul><li>Create choices for content administrators </li></ul><ul><li>Make those choices easily accessible (UI) </li></ul>
  6. 6. Where Does Fusion Come In? <ul><li>Fusion was built by TopNotchThemes, a company that builds and sells premium Drupal themes </li></ul><ul><li>We needed a theming system that would: </li></ul><ul><ul><li>Produce themes that work for a wide range of sites </li></ul></ul><ul><ul><li>Cut back on repetitive theming tasks </li></ul></ul><ul><ul><li>Allow non-themers the ability to tweak the layout and look of a site without CSS knowledge </li></ul></ul><ul><li>The Result: Fusion is a base theme that natively results in a sustainable end-product </li></ul>
  7. 7. What Exactly is Fusion? and what makes it so darn special?
  8. 8. Fusion is a Base Theme <ul><li>Built for flexibility and sustainability </li></ul><ul><li>960px Grid with Layout Options in UI </li></ul><ul><li>Skinr Integration </li></ul><ul><li>Great documentation and support </li></ul><ul><li>http://drupal.org/project/fusion </li></ul>
  9. 9. 960px Grid w/ Layout Options <ul><li>16/12 column layout </li></ul><ul><li>Fluid or fixed width </li></ul><ul><li>Sidebars split, both first or both last </li></ul><ul><li>Configurable sidebar widths </li></ul>
  10. 10. 960px Grid w/ Layout Options <ul><li>16/12 column layout </li></ul><ul><li>Fluid or fixed width </li></ul><ul><li>Sidebars split, both first or both last </li></ul><ul><li>Configurable sidebar widths </li></ul>
  11. 11. 960px Grid w/ Layout Options <ul><li>16/12 column layout </li></ul><ul><li>Fluid or fixed width </li></ul><ul><li>Sidebars split, both first or both last </li></ul><ul><li>Configurable sidebar widths </li></ul>
  12. 12. 960px Grid w/ Layout Options <ul><li>16/12 column layout </li></ul><ul><li>Fluid or fixed width </li></ul><ul><li>Sidebars split, both first or both last </li></ul><ul><li>Configurable sidebar widths </li></ul>
  13. 13. 960px Grid w/ Layout Options <ul><li>16/12 column layout </li></ul><ul><li>Fluid or fixed width </li></ul><ul><li>Sidebars split, both first or both last </li></ul><ul><li>Configurable sidebar widths </li></ul>
  14. 14. Skinr Integration <ul><li>Are you thinking “Whoop-dee-do. I can add Skinr to any base theme” ? </li></ul><ul><li>Fusion comes with ready-to-use Skinr styles </li></ul><ul><ul><li>Cut back on repetitive work. Add a few lines of custom CSS to tweak the Fusion styles to your theme </li></ul></ul><ul><ul><li>Disable any unwanted Fusion styles and add your own </li></ul></ul>
  15. 15. Some of Fusion’s Skinr Styles <ul><li>Horizontal login form </li></ul><ul><li>Multi-column menu </li></ul><ul><li>2 or 3 column lists </li></ul><ul><li>Vertical drop-down menus </li></ul>
  16. 16. Build Your Own Fusion Theme and get on the path to sustainability
  17. 17. Creating a Subtheme <ul><li>Similar to creating a sub theme for any other Drupal theme </li></ul><ul><li>Copy fusion_starter directory from fusion into sites/all/thems </li></ul><ul><li>Rename some things (theme directory, .info file, CSS file) </li></ul><ul><li>Update content in .info file </li></ul><ul><li>Enable Fusion and your new theme </li></ul><ul><li>Get Details: http://fusiondrupalthemes.com/support/theme-developers/subtheming-quickstart </li></ul>
  18. 18. Tweaking Fusion’s Skinr Styles <ul><li>Just add CSS! </li></ul><ul><ul><li>Your theme’s CSS files will override Fusion core’s styles. </li></ul></ul><ul><ul><li>Tweak slightly with updated colors and fonts </li></ul></ul><ul><ul><li>Or completely change the style </li></ul></ul>
  19. 19. Disabling Fusion’s Skinr Styles <ul><li>Find the set of styles in Fusion Core’s .info file </li></ul><ul><li>Copy the styles to your theme’s .info </li></ul><ul><li>Remove / tweak individual options </li></ul><ul><li>Or remove the entire set </li></ul>
  20. 20. Disabling Fusion’s Skinr Styles <ul><li>Find the set of styles in Fusion Core’s .info file </li></ul><ul><li>Copy the styles to your theme’s .info </li></ul><ul><li>Remove / tweak individual options </li></ul><ul><li>Or remove the entire set </li></ul>
  21. 21. Disabling Fusion’s Skinr Styles <ul><li>Find the set of styles in Fusion Core’s .info file </li></ul><ul><li>Copy the styles to your theme’s .info </li></ul><ul><li>Remove / tweak individual options </li></ul><ul><li>Or remove the entire set </li></ul>
  22. 22. Adding Custom Skinr Styles <ul><li>Define the style in your .info file </li></ul><ul><li>Enable the style on a block, view or panel </li></ul><ul><li>Add CSS </li></ul>
  23. 23. Adding Custom Skinr Styles <ul><li>Define the style in your .info file </li></ul><ul><li>Enable the style on a block, view or panel </li></ul><ul><li>Add CSS </li></ul>
  24. 24. Adding Custom Skinr Styles <ul><li>Define the style in your .info file </li></ul><ul><li>Enable the style on a block, view or panel </li></ul><ul><li>Add CSS </li></ul>
  25. 25. Adding Custom Skinr Styles <ul><li>Define the style in your .info file </li></ul><ul><li>Enable the style on a block, view or panel </li></ul><ul><li>Add CSS </li></ul>
  26. 26. Adding Custom Skinr Styles <ul><li>Define the style in your .info file </li></ul><ul><li>Enable the style on a block, view or panel </li></ul><ul><li>Add CSS </li></ul>
  27. 27. Adding Custom Skinr Styles <ul><li>Define the style in your .info file </li></ul><ul><li>Enable the style on a block, view or panel </li></ul><ul><li>Add CSS </li></ul>
  28. 28. Continuing Ed. Documentation and Resources
  29. 29. Fusion Documentation <ul><li>Standard Documentation http://fusiondrupalthemes.com/support/documentation </li></ul><ul><li>How to Create a Custom Grid for Fusion http://fusiondrupalthemes.com/support/theme-developers/grid-concepts/creating-custom-grid-definition </li></ul><ul><li>Developer Center http://fusiondrupalthemes.com/developers </li></ul>
  30. 30. Get More Help <ul><li>Fusion Forums http://fusiondrupalthemes.com/forum/using-fusion </li></ul><ul><li>TopNotchThemes on IRC http://drupal.org/irc #topnotchthemes </li></ul><ul><li>Fusion Issue Queue http://drupal.org/project/issues/fusion </li></ul>
  31. 31. Fusion Downloads <ul><li>Fusion Core http://drupal.org/project/fusion </li></ul><ul><li>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 </li></ul><ul><li>Fusion Distro http://drupal.org/project/fusion_distro </li></ul>
  32. 32. Get a Fusion Demo Site <ul><li>http://www.webenabled.com/application/tnt-fusion </li></ul>

×