SlideShare ist ein Scribd-Unternehmen logo
1 von 35
Downloaden Sie, um offline zu lesen
Drupal 6 Theming
      John Albin Wilkins


    Drupal.org : JohnAlbin
   Twitter.com : @johnalbin
Designing for Drupal
    ! Overview of the Layer
      Drupal Theming

    ! Implementation Details
      ! Templates
      ! Preprocessors
      ! Base Themes
    ! Where to go for help
Theming Example
Theming Example
More Zen Examples
More Zen Examples
More Zen Examples
Drupal Design
<?php print "with some PHP" ?>

Drupal Design
Drupal’s Theme Layer
     (the big picture)
Example Theme
Structure of page.tpl.php
Structure of page.tpl.php

           CSS style sheets




                                Search box   .


                              Title
          Conditional Info


                 content
Where do page.tpl.php
variables come from?
What do you need to know?

             •   Your theme doesn’t need
                 all the templates

             •   You don’t need to learn
                 all the variables

             •   Let Drupal’s architecture
                 build parts of your theme
Copy, Override, Modify




Templates and CSS are pulled from lower layers.

  Unless they are overridden in your theme.
Preprocess Functions




 modify variables using a function:
[theme name]_preprocess_[hook]

 e.g. example_preprocess_page
Preprocess Functions


                                            Page Variable
                                            modifications




          modify variables using a function:
         [theme name]_preprocess_[hook]
                                         Node Variable
           e.g. example_preprocess_page   Additions


Put preprocess functions in your theme’s template.php
What was the part in
   the middle?
   http://drupal.org/theme-guide
Base Themes
 Powerful Frameworks for
Beginners and Power Users
Benefits of Base Themes
 •   You don’t have to build everything
     yourself. Copy, override, and modify only
     what you need to.
 •   Bug fixes.
     Others can fix any bugs in the base theme.
 •   New features.
     For contrib Themes, there will occasionally
     be new features.
 •   Support.
     If you have modified an existing theme,
     sometimes the only answer you will get to
     your support question is “Well, it works
     fine in the original theme.”
 •   Rapid Theme Development.
     Many things are built for you.
http://drupal.org/project/zen
Why use Zen?
•   Designed for beginners and Theming ninjas.

•   Extensive on-line documentation.

•   Step-by-step instructions on building your own sub-theme.

•   Extensive in-line comments in its PHP and CSS files.
Why use Zen?
•   Designed for beginners and Theming ninjas.

•   Extensive on-line documentation.

•   Step-by-step instructions on building your own sub-theme.

•   Extensive in-line comments in its PHP and CSS files.
Why use Zen?
•   Designed for beginners and Theming ninjas.

•   Extensive on-line documentation.

•   Step-by-step instructions on building your own sub-theme.

•   Extensive in-line comments in its PHP and CSS files.

•   It’s also got a laundry list of features. (which are exciting to use,
    but boring to list.)

•   A fantastically flexible CSS Layout method
    (that even works with IE5.5.)

•   The developer lives in Taiwan.
Brief overview of Zen’s Layout method

•   Source-ordered HTML: The importance of the pieces of content
    determines the order in HTML, and not the graphic design.

•   Flexible layout options:

    •   Fluid (100% width) or fixed-width layout

    •   Optional horizontal navbar

    •   1-3 columns built-in. More columns are possible without
        mind-bending contortions.

•   Zen’s default Layout Method is completely pluggable. If you don’t
    like it, just replace the layout.css file with your own layout
    method: YUI, YAML, Jello Mold, Holy Grail, etc.
Brief overview of Zen’s Layout method

•   Source-ordered HTML: The importance of the pieces of content
    determines the order in HTML, and not the graphic design.

•   Flexible layout options:

    •   Fluid (100% width) or fixed-width layout

    •   Optional horizontal navbar

    •   1-3 columns built-in. More columns are possible without
        mind-bending contortions.

•   Zen’s default Layout Method is completely pluggable. If you don’t
    like it, just replace the layout.css file with your own layout
    method: YUI, YAML, Jello Mold, Holy Grail, etc.
Brief overview of Zen’s Layout method

•   Source-ordered HTML: The importance of the pieces of content
    determines the order in HTML, and not the graphic design.

•   Flexible layout options:

    •   Fluid (100% width) or fixed-width layout

    •   Optional horizontal navbar

    •   1-3 columns built-in. More columns are possible without
        mind-bending contortions.

•   Zen’s default Layout Method is completely pluggable. If you don’t
    like it, just replace the layout.css file with your own layout
    method: YUI, YAML, Jello Mold, Holy Grail, etc.
Negative Margins
  (and positive results)




  ( These blocks have float: left; )
Negative Margins
  (and positive results)




  ( These blocks have float: left; )
Negative Margins
  (and positive results)




  ( These blocks have float: left; )
Negative Margins
  (and positive results)




  ( These blocks have float: left; )
Negative Margins
  (and positive results)




  ( These blocks have float: left; )
Negative Margins
  (and positive results)




  ( These blocks have float: left; )
Getting Help
 http://drupal.org/theme-guide
 http://drupal.org/project/zen
 http://drupal.org/irc
    #drupal-themes
    #drupal-support
    #drupal
 Ask Questions!

Weitere ähnliche Inhalte

Was ist angesagt?

WordPress Blogs 101
WordPress Blogs 101WordPress Blogs 101
WordPress Blogs 101Tom McGee
 
Themer's roundtable
Themer's roundtableThemer's roundtable
Themer's roundtablecanarymason
 
Open Standards in the Walled Garden
Open Standards in the Walled GardenOpen Standards in the Walled Garden
Open Standards in the Walled Gardendigitalbindery
 
Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Found...
Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Found...Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Found...
Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Found...Carlos Ospina
 
EPUB for Website Producers
EPUB for Website ProducersEPUB for Website Producers
EPUB for Website Producerswaldoj
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSTJ Stalcup
 
Child Theme Frameworks
Child Theme FrameworksChild Theme Frameworks
Child Theme Frameworksryngrn
 
Epub in the wild
Epub in the wildEpub in the wild
Epub in the wildliz_castro
 
Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010canarymason
 
From WordPress With Love
From WordPress With LoveFrom WordPress With Love
From WordPress With LoveUp2 Technology
 
Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Thinkful
 
Theme frameworks & child themes
Theme frameworks & child themesTheme frameworks & child themes
Theme frameworks & child themesChris Olbekson
 
The Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital CampThe Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital Campcanarymason
 
Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)Daniel Friedman
 
Presentation 1 Web--dev
Presentation 1 Web--devPresentation 1 Web--dev
Presentation 1 Web--devaltsav
 
Drupal Developer Skills (2012) - DrupalCamp LA 2012
Drupal Developer Skills (2012) - DrupalCamp LA 2012Drupal Developer Skills (2012) - DrupalCamp LA 2012
Drupal Developer Skills (2012) - DrupalCamp LA 2012Chris Charlton
 
Copywriting for seo
Copywriting for seoCopywriting for seo
Copywriting for seobrian9p
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress ThemesLaura Hartwig
 

Was ist angesagt? (20)

WordPress Blogs 101
WordPress Blogs 101WordPress Blogs 101
WordPress Blogs 101
 
Themer's roundtable
Themer's roundtableThemer's roundtable
Themer's roundtable
 
Open Standards in the Walled Garden
Open Standards in the Walled GardenOpen Standards in the Walled Garden
Open Standards in the Walled Garden
 
Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Found...
Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Found...Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Found...
Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Found...
 
EPUB for Website Producers
EPUB for Website ProducersEPUB for Website Producers
EPUB for Website Producers
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSS
 
Child Theme Frameworks
Child Theme FrameworksChild Theme Frameworks
Child Theme Frameworks
 
Epub in the wild
Epub in the wildEpub in the wild
Epub in the wild
 
Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010
 
Color Me Flexible
Color Me FlexibleColor Me Flexible
Color Me Flexible
 
Web dev-101
Web dev-101Web dev-101
Web dev-101
 
From WordPress With Love
From WordPress With LoveFrom WordPress With Love
From WordPress With Love
 
Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
 
Theme frameworks & child themes
Theme frameworks & child themesTheme frameworks & child themes
Theme frameworks & child themes
 
The Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital CampThe Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital Camp
 
Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)
 
Presentation 1 Web--dev
Presentation 1 Web--devPresentation 1 Web--dev
Presentation 1 Web--dev
 
Drupal Developer Skills (2012) - DrupalCamp LA 2012
Drupal Developer Skills (2012) - DrupalCamp LA 2012Drupal Developer Skills (2012) - DrupalCamp LA 2012
Drupal Developer Skills (2012) - DrupalCamp LA 2012
 
Copywriting for seo
Copywriting for seoCopywriting for seo
Copywriting for seo
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
 

Andere mochten auch

Lies, Damned Lies, and Remotely Hosted Encrypted Data
Lies, Damned Lies, and Remotely Hosted Encrypted DataLies, Damned Lies, and Remotely Hosted Encrypted Data
Lies, Damned Lies, and Remotely Hosted Encrypted DataGeorg Greve
 
Wee @ social media 011
Wee @ social media 011Wee @ social media 011
Wee @ social media 011WEE
 
PyJS intro
PyJS introPyJS intro
PyJS introDemix
 
A2 나만의 싸이월드 만들기
A2 나만의 싸이월드 만들기A2 나만의 싸이월드 만들기
A2 나만의 싸이월드 만들기NAVER D2
 
Furia de género: el transfeminismo como práctica política de lucha integrador...
Furia de género: el transfeminismo como práctica política de lucha integrador...Furia de género: el transfeminismo como práctica política de lucha integrador...
Furia de género: el transfeminismo como práctica política de lucha integrador...belenmaciascalvo
 
避免洗腎的秘方
避免洗腎的秘方避免洗腎的秘方
避免洗腎的秘方5045033
 
Nanxun old town, zhejiang (浙江 南潯古鎮)
Nanxun old town, zhejiang (浙江 南潯古鎮)Nanxun old town, zhejiang (浙江 南潯古鎮)
Nanxun old town, zhejiang (浙江 南潯古鎮)Chung Yen Chang
 

Andere mochten auch (8)

Lies, Damned Lies, and Remotely Hosted Encrypted Data
Lies, Damned Lies, and Remotely Hosted Encrypted DataLies, Damned Lies, and Remotely Hosted Encrypted Data
Lies, Damned Lies, and Remotely Hosted Encrypted Data
 
Weibo, social media phenomenon in China
Weibo, social media phenomenon in ChinaWeibo, social media phenomenon in China
Weibo, social media phenomenon in China
 
Wee @ social media 011
Wee @ social media 011Wee @ social media 011
Wee @ social media 011
 
PyJS intro
PyJS introPyJS intro
PyJS intro
 
A2 나만의 싸이월드 만들기
A2 나만의 싸이월드 만들기A2 나만의 싸이월드 만들기
A2 나만의 싸이월드 만들기
 
Furia de género: el transfeminismo como práctica política de lucha integrador...
Furia de género: el transfeminismo como práctica política de lucha integrador...Furia de género: el transfeminismo como práctica política de lucha integrador...
Furia de género: el transfeminismo como práctica política de lucha integrador...
 
避免洗腎的秘方
避免洗腎的秘方避免洗腎的秘方
避免洗腎的秘方
 
Nanxun old town, zhejiang (浙江 南潯古鎮)
Nanxun old town, zhejiang (浙江 南潯古鎮)Nanxun old town, zhejiang (浙江 南潯古鎮)
Nanxun old town, zhejiang (浙江 南潯古鎮)
 

Ähnlich wie Nanocon Taiwan

Default theme implementations: a guide for module developers that want sweet ...
Default theme implementations: a guide for module developers that want sweet ...Default theme implementations: a guide for module developers that want sweet ...
Default theme implementations: a guide for module developers that want sweet ...John Albin Wilkins
 
Rockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child ThemesRockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child ThemesAndrew Wikel
 
Drupal 7: Theming with Omega
Drupal 7: Theming with OmegaDrupal 7: Theming with Omega
Drupal 7: Theming with OmegaEric Sembrat
 
Child Themes and CSS in WordPress
Child Themes and CSS in WordPressChild Themes and CSS in WordPress
Child Themes and CSS in WordPressMatthew Vaccaro
 
Drupal8 themingdeepdive drupaldevdays-montpellier17042015
Drupal8 themingdeepdive drupaldevdays-montpellier17042015Drupal8 themingdeepdive drupaldevdays-montpellier17042015
Drupal8 themingdeepdive drupaldevdays-montpellier17042015Romain Jarraud
 
Drupal 8 theming deep dive
Drupal 8 theming deep diveDrupal 8 theming deep dive
Drupal 8 theming deep diveRomain Jarraud
 
Drupal: an Overview
Drupal: an OverviewDrupal: an Overview
Drupal: an OverviewMatt Weaver
 
MCC Web Design Workshop
MCC Web Design WorkshopMCC Web Design Workshop
MCC Web Design WorkshopFaye Tandog
 
full-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptxfull-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptxPlasterdog Web Design
 
WordPress Themes and Plugins
WordPress Themes and PluginsWordPress Themes and Plugins
WordPress Themes and Pluginssuperann
 
Introduction to Drupal (7) Theming
Introduction to Drupal (7) ThemingIntroduction to Drupal (7) Theming
Introduction to Drupal (7) ThemingRobert Carr
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Eugenio Minardi
 
April 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child ThemesApril 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child ThemesEric Sembrat
 
Wordpress theme development
Wordpress theme developmentWordpress theme development
Wordpress theme developmentNaeem Junejo
 
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)Laura Scott
 
Theming moodle technical
Theming moodle   technicalTheming moodle   technical
Theming moodle technicalAlex Walker
 
Advanced theming
Advanced themingAdvanced theming
Advanced themingtlattimore
 

Ähnlich wie Nanocon Taiwan (20)

Mastering zen
Mastering zenMastering zen
Mastering zen
 
Default theme implementations: a guide for module developers that want sweet ...
Default theme implementations: a guide for module developers that want sweet ...Default theme implementations: a guide for module developers that want sweet ...
Default theme implementations: a guide for module developers that want sweet ...
 
Rockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child ThemesRockford WordPress Meetup - Child Themes
Rockford WordPress Meetup - Child Themes
 
Drupal 7: Theming with Omega
Drupal 7: Theming with OmegaDrupal 7: Theming with Omega
Drupal 7: Theming with Omega
 
Child Themes and CSS in WordPress
Child Themes and CSS in WordPressChild Themes and CSS in WordPress
Child Themes and CSS in WordPress
 
Drupal8 themingdeepdive drupaldevdays-montpellier17042015
Drupal8 themingdeepdive drupaldevdays-montpellier17042015Drupal8 themingdeepdive drupaldevdays-montpellier17042015
Drupal8 themingdeepdive drupaldevdays-montpellier17042015
 
Drupal 8 theming deep dive
Drupal 8 theming deep diveDrupal 8 theming deep dive
Drupal 8 theming deep dive
 
Efficient theming in Drupal
Efficient theming in DrupalEfficient theming in Drupal
Efficient theming in Drupal
 
Drupal: an Overview
Drupal: an OverviewDrupal: an Overview
Drupal: an Overview
 
MCC Web Design Workshop
MCC Web Design WorkshopMCC Web Design Workshop
MCC Web Design Workshop
 
full-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptxfull-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptx
 
WordPress Themes and Plugins
WordPress Themes and PluginsWordPress Themes and Plugins
WordPress Themes and Plugins
 
Introduction to Drupal (7) Theming
Introduction to Drupal (7) ThemingIntroduction to Drupal (7) Theming
Introduction to Drupal (7) Theming
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)
 
April 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child ThemesApril 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child Themes
 
Wordpress theme development
Wordpress theme developmentWordpress theme development
Wordpress theme development
 
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
 
Theming moodle technical
Theming moodle   technicalTheming moodle   technical
Theming moodle technical
 
Advanced theming
Advanced themingAdvanced theming
Advanced theming
 
Advanced theming
Advanced themingAdvanced theming
Advanced theming
 

Mehr von John Albin Wilkins

Using the CSS Nesting Spec Today
Using the CSS Nesting Spec TodayUsing the CSS Nesting Spec Today
Using the CSS Nesting Spec TodayJohn Albin Wilkins
 
The Drupal Roadmap: From D7 to D9
The Drupal Roadmap: From D7 to D9The Drupal Roadmap: From D7 to D9
The Drupal Roadmap: From D7 to D9John Albin Wilkins
 
CSS-in-JS: unexpected lessons for Drupal component design
CSS-in-JS: unexpected lessons for Drupal component designCSS-in-JS: unexpected lessons for Drupal component design
CSS-in-JS: unexpected lessons for Drupal component designJohn Albin Wilkins
 
Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!John Albin Wilkins
 
Styleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web DevelopmentStyleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web DevelopmentJohn Albin Wilkins
 
Managing Complex Projects with Design Components - Drupalcon Austin 2014
Managing Complex Projects with Design Components - Drupalcon Austin 2014Managing Complex Projects with Design Components - Drupalcon Austin 2014
Managing Complex Projects with Design Components - Drupalcon Austin 2014John Albin Wilkins
 
DrupalSouth 2014: Managing Complex Projects with Design Components
DrupalSouth 2014: Managing Complex Projects with Design ComponentsDrupalSouth 2014: Managing Complex Projects with Design Components
DrupalSouth 2014: Managing Complex Projects with Design ComponentsJohn Albin Wilkins
 
SassConf: Managing Complex Projects with Design Components
SassConf: Managing Complex Projects with Design ComponentsSassConf: Managing Complex Projects with Design Components
SassConf: Managing Complex Projects with Design ComponentsJohn Albin Wilkins
 
Become an IA superstar (Chinese version)
Become an IA superstar (Chinese version)Become an IA superstar (Chinese version)
Become an IA superstar (Chinese version)John Albin Wilkins
 
Mobile drupal: building a mobile theme
Mobile drupal: building a mobile themeMobile drupal: building a mobile theme
Mobile drupal: building a mobile themeJohn Albin Wilkins
 
Drupal and the Future of the Web
Drupal and the Future of the WebDrupal and the Future of the Web
Drupal and the Future of the WebJohn Albin Wilkins
 
Making Drupal Dance: Techniques for Non-obvious Theme Manipulations
Making Drupal Dance: Techniques for Non-obvious Theme ManipulationsMaking Drupal Dance: Techniques for Non-obvious Theme Manipulations
Making Drupal Dance: Techniques for Non-obvious Theme ManipulationsJohn Albin Wilkins
 

Mehr von John Albin Wilkins (18)

Using the CSS Nesting Spec Today
Using the CSS Nesting Spec TodayUsing the CSS Nesting Spec Today
Using the CSS Nesting Spec Today
 
The Drupal Roadmap: From D7 to D9
The Drupal Roadmap: From D7 to D9The Drupal Roadmap: From D7 to D9
The Drupal Roadmap: From D7 to D9
 
Mastering Drupal 8’s Twig
Mastering Drupal 8’s TwigMastering Drupal 8’s Twig
Mastering Drupal 8’s Twig
 
CSS-in-JS: unexpected lessons for Drupal component design
CSS-in-JS: unexpected lessons for Drupal component designCSS-in-JS: unexpected lessons for Drupal component design
CSS-in-JS: unexpected lessons for Drupal component design
 
Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!
 
Styleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web DevelopmentStyleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web Development
 
Managing Complex Projects with Design Components - Drupalcon Austin 2014
Managing Complex Projects with Design Components - Drupalcon Austin 2014Managing Complex Projects with Design Components - Drupalcon Austin 2014
Managing Complex Projects with Design Components - Drupalcon Austin 2014
 
DrupalSouth 2014: Managing Complex Projects with Design Components
DrupalSouth 2014: Managing Complex Projects with Design ComponentsDrupalSouth 2014: Managing Complex Projects with Design Components
DrupalSouth 2014: Managing Complex Projects with Design Components
 
SassConf: Managing Complex Projects with Design Components
SassConf: Managing Complex Projects with Design ComponentsSassConf: Managing Complex Projects with Design Components
SassConf: Managing Complex Projects with Design Components
 
Drupal Camp Taipei Keynote
Drupal Camp Taipei KeynoteDrupal Camp Taipei Keynote
Drupal Camp Taipei Keynote
 
Become an IA superstar (Chinese version)
Become an IA superstar (Chinese version)Become an IA superstar (Chinese version)
Become an IA superstar (Chinese version)
 
Mobile drupal: building a mobile theme
Mobile drupal: building a mobile themeMobile drupal: building a mobile theme
Mobile drupal: building a mobile theme
 
Sass: CSS with Attitude
Sass: CSS with AttitudeSass: CSS with Attitude
Sass: CSS with Attitude
 
Drupal and the Future of the Web
Drupal and the Future of the WebDrupal and the Future of the Web
Drupal and the Future of the Web
 
What's new in D7 Theming?
What's new in D7 Theming?What's new in D7 Theming?
What's new in D7 Theming?
 
Rocking the Theme Layer
Rocking the Theme LayerRocking the Theme Layer
Rocking the Theme Layer
 
Drupal Design Tips
Drupal Design TipsDrupal Design Tips
Drupal Design Tips
 
Making Drupal Dance: Techniques for Non-obvious Theme Manipulations
Making Drupal Dance: Techniques for Non-obvious Theme ManipulationsMaking Drupal Dance: Techniques for Non-obvious Theme Manipulations
Making Drupal Dance: Techniques for Non-obvious Theme Manipulations
 

Kürzlich hochgeladen

Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 

Kürzlich hochgeladen (20)

Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 

Nanocon Taiwan

  • 1. Drupal 6 Theming John Albin Wilkins Drupal.org : JohnAlbin Twitter.com : @johnalbin
  • 2. Designing for Drupal ! Overview of the Layer Drupal Theming ! Implementation Details ! Templates ! Preprocessors ! Base Themes ! Where to go for help
  • 9. <?php print "with some PHP" ?> Drupal Design
  • 10. Drupal’s Theme Layer (the big picture)
  • 13. Structure of page.tpl.php CSS style sheets Search box . Title Conditional Info content
  • 15. What do you need to know? • Your theme doesn’t need all the templates • You don’t need to learn all the variables • Let Drupal’s architecture build parts of your theme
  • 16. Copy, Override, Modify Templates and CSS are pulled from lower layers. Unless they are overridden in your theme.
  • 17. Preprocess Functions modify variables using a function: [theme name]_preprocess_[hook] e.g. example_preprocess_page
  • 18. Preprocess Functions Page Variable modifications modify variables using a function: [theme name]_preprocess_[hook] Node Variable e.g. example_preprocess_page Additions Put preprocess functions in your theme’s template.php
  • 19. What was the part in the middle? http://drupal.org/theme-guide
  • 20. Base Themes Powerful Frameworks for Beginners and Power Users
  • 21. Benefits of Base Themes • You don’t have to build everything yourself. Copy, override, and modify only what you need to. • Bug fixes. Others can fix any bugs in the base theme. • New features. For contrib Themes, there will occasionally be new features. • Support. If you have modified an existing theme, sometimes the only answer you will get to your support question is “Well, it works fine in the original theme.” • Rapid Theme Development. Many things are built for you.
  • 23. Why use Zen? • Designed for beginners and Theming ninjas. • Extensive on-line documentation. • Step-by-step instructions on building your own sub-theme. • Extensive in-line comments in its PHP and CSS files.
  • 24. Why use Zen? • Designed for beginners and Theming ninjas. • Extensive on-line documentation. • Step-by-step instructions on building your own sub-theme. • Extensive in-line comments in its PHP and CSS files.
  • 25. Why use Zen? • Designed for beginners and Theming ninjas. • Extensive on-line documentation. • Step-by-step instructions on building your own sub-theme. • Extensive in-line comments in its PHP and CSS files. • It’s also got a laundry list of features. (which are exciting to use, but boring to list.) • A fantastically flexible CSS Layout method (that even works with IE5.5.) • The developer lives in Taiwan.
  • 26. Brief overview of Zen’s Layout method • Source-ordered HTML: The importance of the pieces of content determines the order in HTML, and not the graphic design. • Flexible layout options: • Fluid (100% width) or fixed-width layout • Optional horizontal navbar • 1-3 columns built-in. More columns are possible without mind-bending contortions. • Zen’s default Layout Method is completely pluggable. If you don’t like it, just replace the layout.css file with your own layout method: YUI, YAML, Jello Mold, Holy Grail, etc.
  • 27. Brief overview of Zen’s Layout method • Source-ordered HTML: The importance of the pieces of content determines the order in HTML, and not the graphic design. • Flexible layout options: • Fluid (100% width) or fixed-width layout • Optional horizontal navbar • 1-3 columns built-in. More columns are possible without mind-bending contortions. • Zen’s default Layout Method is completely pluggable. If you don’t like it, just replace the layout.css file with your own layout method: YUI, YAML, Jello Mold, Holy Grail, etc.
  • 28. Brief overview of Zen’s Layout method • Source-ordered HTML: The importance of the pieces of content determines the order in HTML, and not the graphic design. • Flexible layout options: • Fluid (100% width) or fixed-width layout • Optional horizontal navbar • 1-3 columns built-in. More columns are possible without mind-bending contortions. • Zen’s default Layout Method is completely pluggable. If you don’t like it, just replace the layout.css file with your own layout method: YUI, YAML, Jello Mold, Holy Grail, etc.
  • 29. Negative Margins (and positive results) ( These blocks have float: left; )
  • 30. Negative Margins (and positive results) ( These blocks have float: left; )
  • 31. Negative Margins (and positive results) ( These blocks have float: left; )
  • 32. Negative Margins (and positive results) ( These blocks have float: left; )
  • 33. Negative Margins (and positive results) ( These blocks have float: left; )
  • 34. Negative Margins (and positive results) ( These blocks have float: left; )
  • 35. Getting Help http://drupal.org/theme-guide http://drupal.org/project/zen http://drupal.org/irc #drupal-themes #drupal-support #drupal Ask Questions!