SlideShare a Scribd company logo
Drupal 7 Ninja Theming
How Context + Delta + Omega will blow your old
                themes up
A quick introduction
                     Claudio Beatrice
                                     Developer

                             @omissis twitter
                http://silent-voice.org  blog
                    http://agavee.com   team

      Co-founder of the ‘Drupal Italia’ Association

                   Skylogic S.P.A. - Turin (IT)
            Satellite telecommunications
       C, PHP, Drupal, Java, Javascript, MySQL, LDAP

                  Go On Media - Paris (FR)
                               Internet Media
                  PHP, Zend, Javascript, HTML, CSS

Agavee - Somewhere in Northern Italy :)
                          Web Development
            PHP, Drupal, Symfony, Javascript, jQuery
and some credits
     Jake Strawn
     Developer, Themer, Designer

     twitter @himerus
     email   jake.strawn@himerus.com
     blog    http://himerus.com



     Sebastian Siemssen
     Developer

     twitter @thefubhy
Alright then, what makes
   Omega so special?
It sits on the
    shoulders of giants
It’s an evolved implementation
of the ninesixty Drupal
theme which, in turn, is based
upon the 960 grid system
by Nathan Smith

                It gets inspiration (and features)
                from the most appreciated Drupal
                themes such as Acquia Marina,
                Zen, Fusion and Studio
Down with the gridness
960gs helps you to save time and to reduce
frustration by streamlining your front-end
development and insuring (what Yahoo
determines as) A-grade browsers compatibility




        http://sonspring.com/journal/960-grid-system
Down with the gridness
    Drupal (well, the guy who developed
    ninesixty) brought 960gs even further by
    adding some more functionalities to the
    framework such as:
•   push & pull classes (backported to 960gs)
•   ns() function for contextual widths of grid
    elements
•   grid overlay and debugging tools
•   RTL language support

    All these features are available in Omega
A Saucerful of inspirations
                                               960gs features

•   12, 16, 24, 32 column options
    •   Each zone has its own container options, which allows
        for mixed layouts
•   no need to use ns() function in most situations
    •   template_preprocess_page() handles this based on theme
        settings
    •   theme-settings.php gives extensive theme settings to base
        theme & all sub themes based on Omega
•   content first (.push & .pull) options
A Saucerful of inspirations
                                      Non-960gs features
 •   Custom page titles
     •   Alternate settings for <front> and other pages
     •   Custom separator

 •   Custom breadcrumbs
     •   On/off toggle for breadcrumbs
     •   Custom separator
     •   Toggle “home” link in breadcrumb
     •   Append current page to end of breadcrumb

 •   Mission statements
     •   Choose to display on <front> only or all pages
Hey! But there’s moar!
•   Highly customizable theme settings that let
    you configure your layout in a few clicks
•   XHTML and HTML5 subthemes
•   Delta and Context modules give you the
    ability to create separated theme
    configurations and use them depending on
    the conditions of your choice with no LOC
•   Drush integration lets you spawn new
    subthemes and export/revert their
    configuration in a matter of seconds
Let’s take a quick tour
Drupal 7 ninja theming
Drupal 7 ninja theming
Drupal 7 ninja theming
Drupal 7 ninja theming
Drupal 7 ninja theming
Drupal 7 ninja theming
Don’t call him baby
• Easily extendable: cleanly integrate custom
  grids is a matter of a few LOC
• Well documented: it has a dedicated website
  with plenty of resources and videos
• Fast development pace
• Growing community
Ok ok, you got me. Ain’t it a
   little bit too fat tho?

 ‘Course not! :) But let’s pretend it
   is so I am allowed to introduce
        the upcoming version...
Omega 3
                     it’s good for your heart
• Segmentation of Alpha & Omega
   • this will allow users to enable core functionalities without
        the added weight of some advanced features
•   Zone/Region Flexibility
     • ability to freely reassign zones and regions through the
        interface (Omega UI)
     • branding zone configurable through UI, less region--
        branding-tpl.php tweaking
•   Region Ordering improvements
     • static & dynamic zones will be both allowed to be ordered
     • finer control on how zones appear and are rendered
        (with all the consequences on SEO)
•   Performance Enhancements
     • Preprocess/process, Css, Theme settings
•   Optional CSS Loading
Omega 3
                 it’s good for your heart


• Responsive Grids
   • Adaptive layouts through customizable
     @media queries or javascript as fallback (IE   )
   • Good number of tweaks available such as
     optional grid styles and viewport/scale settings
   • Default layouts: mobile (region stacked),
     narrow (720px), normal (960px), wide
     (1200px)
Omega 3
                 it’s good for your heart




You oughta watch the entire video: http://bit.ly/e4zAt0
References
http://960.gs
http://himerus.com
http://developmentgeeks.com
http://omega.developmentgeeks.com
http://drupal.org/project/omega
http://groups.drupal.org/omega-framework
http://silent-voice.org
Thank you for watching!
One last thing...™
The DrupalCon London
           •   22 - 25 August
           •   Fairfield Halls,
               Croydon
           •   1500+ expected
               attendees
           •   Loads of awesome
               sessions, Jack
               Strawn’s included!
           •   Fish and chips! :)))

More Related Content

PPT
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
ODP
Drupal distributions - how to build them
PPTX
BDUG Responsive Web Theming - 7/23/12
KEY
Cloud Computing: Amazon AWS and EC2
PDF
Highly available Drupal on a Raspberry Pi cluster
PPTX
Ithemes presentation
PDF
Jeff Rigby on Scaling Drupal in the Enterprise
KEY
Exploring WordPress Multisite
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Drupal distributions - how to build them
BDUG Responsive Web Theming - 7/23/12
Cloud Computing: Amazon AWS and EC2
Highly available Drupal on a Raspberry Pi cluster
Ithemes presentation
Jeff Rigby on Scaling Drupal in the Enterprise
Exploring WordPress Multisite

What's hot (20)

PDF
Wordpress optimization
PDF
Optimizing WordPress for Performance - WordCamp Houston
PDF
Scholarly Publishing with WordPress - part 1: Installation
PDF
Scholarly Publishing with WordPress, a Savvy Researcher Workshop
PPTX
HTML5 and CSS3 Techniques You Can Use Today
PPT
WordPress Multisite
PPTX
Speed up Your Joomla Site for Ultimate Performance
KEY
Understanding WordPress Multisite
PPTX
Joomla! Performance on Steroids
PPTX
Speeding Up WordPress sites
PPTX
Optimizing WordPress - WordPress SF Meetup April 2012
PPTX
Habitat at LinuxLab IT
PDF
Drupal theming - a practical approach (European Drupal Days 2015)
PPTX
Optimizing WordPress (WordCamp Philly 2011)
PPT
PowerPoint Presentation
PDF
Performance on a budget (European Drupal Days 2015)
PPTX
Microsoft Azure Virtual Machine
PDF
Wordpress as a CMS
PPTX
Control the Clouds - Developer Experience with jclouds.pptx
PPTX
WordPress Multisite deck
Wordpress optimization
Optimizing WordPress for Performance - WordCamp Houston
Scholarly Publishing with WordPress - part 1: Installation
Scholarly Publishing with WordPress, a Savvy Researcher Workshop
HTML5 and CSS3 Techniques You Can Use Today
WordPress Multisite
Speed up Your Joomla Site for Ultimate Performance
Understanding WordPress Multisite
Joomla! Performance on Steroids
Speeding Up WordPress sites
Optimizing WordPress - WordPress SF Meetup April 2012
Habitat at LinuxLab IT
Drupal theming - a practical approach (European Drupal Days 2015)
Optimizing WordPress (WordCamp Philly 2011)
PowerPoint Presentation
Performance on a budget (European Drupal Days 2015)
Microsoft Azure Virtual Machine
Wordpress as a CMS
Control the Clouds - Developer Experience with jclouds.pptx
WordPress Multisite deck
Ad

Viewers also liked (20)

PPT
L’atelier créatif : un complément naturel d’une boutique en ligne
PDF
PPTX
Prezi-tation: Internet marketing tool for stand out presentations
PDF
Flora2000 Luxury Floral Collection
ODP
sh404SEF goes Social talk at JoomlaDay Midwest 2011
PPTX
Agile Tour 2016 @ Lille
PDF
Renewable Energy and public transport Newsletter 3
PDF
200805 nsa redact how to publish sanitized reports
PDF
Formations professionnelles CAP Bac Pro sur les zones d'activités pédagogique...
PDF
Pitch du projet "Living Lab"
PDF
UXDev Summit Keynote : A real world story of Angular and Apache Unomi integra...
PDF
Synthese barometre limelight-opinion_way2012
PDF
Tweets Vault
PDF
Marketing ono to one por Manolo Mateos
PDF
Le parisien > Pôle Emploi : 4 000 conseillers dédiés aux entreprises et Emplo...
PDF
Présentation Léman Museomix 2015
PDF
Biggest Challenges Of The Internet Of Things
PDF
Basics of good blogging
PPTX
Mobilité en rural et péri-urbain OuiShare
PDF
Services sur Internet : Que vous coute le « tout gratuit » ?
L’atelier créatif : un complément naturel d’une boutique en ligne
Prezi-tation: Internet marketing tool for stand out presentations
Flora2000 Luxury Floral Collection
sh404SEF goes Social talk at JoomlaDay Midwest 2011
Agile Tour 2016 @ Lille
Renewable Energy and public transport Newsletter 3
200805 nsa redact how to publish sanitized reports
Formations professionnelles CAP Bac Pro sur les zones d'activités pédagogique...
Pitch du projet "Living Lab"
UXDev Summit Keynote : A real world story of Angular and Apache Unomi integra...
Synthese barometre limelight-opinion_way2012
Tweets Vault
Marketing ono to one por Manolo Mateos
Le parisien > Pôle Emploi : 4 000 conseillers dédiés aux entreprises et Emplo...
Présentation Léman Museomix 2015
Biggest Challenges Of The Internet Of Things
Basics of good blogging
Mobilité en rural et péri-urbain OuiShare
Services sur Internet : Que vous coute le « tout gratuit » ?
Ad

Similar to Drupal 7 ninja theming (20)

PPT
Drupal: an Overview
PDF
Absolute Beginners Guide to Drupal
PDF
DrupalCon Austin - Absolute Beginner's Guide to Drupal
PPT
Broward drupal d7-omega
PDF
Stackato v2
PDF
Stackato
PPT
Drupal: Community Plumbing for Public Libraries
PPT
Drupal: Community Plumbing for Public Libraries
PDF
Netflix oss season 2 episode 1 - meetup Lightning talks
PDF
Stackato v4
PPTX
Html5 more than just html5 v final
PDF
Databases in the Hosted Cloud
PDF
Stackato v3
PPTX
CubeJS: eBay’s Node.js Adoption Journey
PDF
Stackato v5
PDF
Famo.us introduction
PPTX
Pure Speed Drupal 4 Gov talk
PPTX
Bringing HTML5 alive in SharePoint
KEY
Ship It ! with Ruby/ Rails Ecosystem
PPT
Deployment Strategies: Managing Code, Content, and Configurations
Drupal: an Overview
Absolute Beginners Guide to Drupal
DrupalCon Austin - Absolute Beginner's Guide to Drupal
Broward drupal d7-omega
Stackato v2
Stackato
Drupal: Community Plumbing for Public Libraries
Drupal: Community Plumbing for Public Libraries
Netflix oss season 2 episode 1 - meetup Lightning talks
Stackato v4
Html5 more than just html5 v final
Databases in the Hosted Cloud
Stackato v3
CubeJS: eBay’s Node.js Adoption Journey
Stackato v5
Famo.us introduction
Pure Speed Drupal 4 Gov talk
Bringing HTML5 alive in SharePoint
Ship It ! with Ruby/ Rails Ecosystem
Deployment Strategies: Managing Code, Content, and Configurations

Recently uploaded (20)

PPTX
Programs and apps: productivity, graphics, security and other tools
PDF
Review of recent advances in non-invasive hemoglobin estimation
PPTX
sap open course for s4hana steps from ECC to s4
PDF
Encapsulation theory and applications.pdf
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PPT
Teaching material agriculture food technology
PPTX
Big Data Technologies - Introduction.pptx
PPTX
Spectroscopy.pptx food analysis technology
DOCX
The AUB Centre for AI in Media Proposal.docx
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
cuic standard and advanced reporting.pdf
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PDF
Approach and Philosophy of On baking technology
Programs and apps: productivity, graphics, security and other tools
Review of recent advances in non-invasive hemoglobin estimation
sap open course for s4hana steps from ECC to s4
Encapsulation theory and applications.pdf
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
Understanding_Digital_Forensics_Presentation.pptx
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Reach Out and Touch Someone: Haptics and Empathic Computing
20250228 LYD VKU AI Blended-Learning.pptx
Teaching material agriculture food technology
Big Data Technologies - Introduction.pptx
Spectroscopy.pptx food analysis technology
The AUB Centre for AI in Media Proposal.docx
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Dropbox Q2 2025 Financial Results & Investor Presentation
Digital-Transformation-Roadmap-for-Companies.pptx
cuic standard and advanced reporting.pdf
Per capita expenditure prediction using model stacking based on satellite ima...
Approach and Philosophy of On baking technology

Drupal 7 ninja theming

  • 1. Drupal 7 Ninja Theming How Context + Delta + Omega will blow your old themes up
  • 2. A quick introduction Claudio Beatrice Developer @omissis twitter http://silent-voice.org blog http://agavee.com team Co-founder of the ‘Drupal Italia’ Association Skylogic S.P.A. - Turin (IT) Satellite telecommunications C, PHP, Drupal, Java, Javascript, MySQL, LDAP Go On Media - Paris (FR) Internet Media PHP, Zend, Javascript, HTML, CSS Agavee - Somewhere in Northern Italy :) Web Development PHP, Drupal, Symfony, Javascript, jQuery
  • 3. and some credits Jake Strawn Developer, Themer, Designer twitter @himerus email jake.strawn@himerus.com blog http://himerus.com Sebastian Siemssen Developer twitter @thefubhy
  • 4. Alright then, what makes Omega so special?
  • 5. It sits on the shoulders of giants It’s an evolved implementation of the ninesixty Drupal theme which, in turn, is based upon the 960 grid system by Nathan Smith It gets inspiration (and features) from the most appreciated Drupal themes such as Acquia Marina, Zen, Fusion and Studio
  • 6. Down with the gridness 960gs helps you to save time and to reduce frustration by streamlining your front-end development and insuring (what Yahoo determines as) A-grade browsers compatibility http://sonspring.com/journal/960-grid-system
  • 7. Down with the gridness Drupal (well, the guy who developed ninesixty) brought 960gs even further by adding some more functionalities to the framework such as: • push & pull classes (backported to 960gs) • ns() function for contextual widths of grid elements • grid overlay and debugging tools • RTL language support All these features are available in Omega
  • 8. A Saucerful of inspirations 960gs features • 12, 16, 24, 32 column options • Each zone has its own container options, which allows for mixed layouts • no need to use ns() function in most situations • template_preprocess_page() handles this based on theme settings • theme-settings.php gives extensive theme settings to base theme & all sub themes based on Omega • content first (.push & .pull) options
  • 9. A Saucerful of inspirations Non-960gs features • Custom page titles • Alternate settings for <front> and other pages • Custom separator • Custom breadcrumbs • On/off toggle for breadcrumbs • Custom separator • Toggle “home” link in breadcrumb • Append current page to end of breadcrumb • Mission statements • Choose to display on <front> only or all pages
  • 10. Hey! But there’s moar! • Highly customizable theme settings that let you configure your layout in a few clicks • XHTML and HTML5 subthemes • Delta and Context modules give you the ability to create separated theme configurations and use them depending on the conditions of your choice with no LOC • Drush integration lets you spawn new subthemes and export/revert their configuration in a matter of seconds
  • 11. Let’s take a quick tour
  • 18. Don’t call him baby • Easily extendable: cleanly integrate custom grids is a matter of a few LOC • Well documented: it has a dedicated website with plenty of resources and videos • Fast development pace • Growing community
  • 19. Ok ok, you got me. Ain’t it a little bit too fat tho? ‘Course not! :) But let’s pretend it is so I am allowed to introduce the upcoming version...
  • 20. Omega 3 it’s good for your heart • Segmentation of Alpha & Omega • this will allow users to enable core functionalities without the added weight of some advanced features • Zone/Region Flexibility • ability to freely reassign zones and regions through the interface (Omega UI) • branding zone configurable through UI, less region-- branding-tpl.php tweaking • Region Ordering improvements • static & dynamic zones will be both allowed to be ordered • finer control on how zones appear and are rendered (with all the consequences on SEO) • Performance Enhancements • Preprocess/process, Css, Theme settings • Optional CSS Loading
  • 21. Omega 3 it’s good for your heart • Responsive Grids • Adaptive layouts through customizable @media queries or javascript as fallback (IE ) • Good number of tweaks available such as optional grid styles and viewport/scale settings • Default layouts: mobile (region stacked), narrow (720px), normal (960px), wide (1200px)
  • 22. Omega 3 it’s good for your heart You oughta watch the entire video: http://bit.ly/e4zAt0
  • 24. Thank you for watching!
  • 26. The DrupalCon London • 22 - 25 August • Fairfield Halls, Croydon • 1500+ expected attendees • Loads of awesome sessions, Jack Strawn’s included! • Fish and chips! :)))