SlideShare a Scribd company logo
Design, UX and Theming




Forensic Theming


       Emma Jane Hogbin
       @emmajanedotnet
     www.designtotheme.com
drupal.org participation
●   emmajane
●   uid: 1773
●   First look at the Drupal code base: 2003ish.
    I stole the i18n table structure.
●   First Drupal site “for pay”: 2006ish.
●   First Drupal socks: 2007.
●   First DrupalCon conference: Szeged in 2008.
●   First Drupal book: 2009.
●   First Drupal core patch: 2010.
    Removed the “welcome” screen.
Really Tiny Web Budgets
The Socks




http://www.flickr.com/photos/mortendk/1439332466/
www.emmajane.net/craft/drupal
Book (Co)Author
Workbook Author
  www.designtotheme.com
Discount Code: DCLON87488
 Valid to the end of August.
Drupal Trainer




 www.sitebuildingextravaganza.com
Lazy Front End Developer
I'll just change this one tpl.php file
                  http://www.flickr.com/photos/gibbons/2500423526
Okay ... and a module file?
and ...
... everything else too? Bugger.
                http://www.flickr.com/photos/amagill/3225245292
This presentation is not about ...
●   Best practices          ●   Inheritance
●   Anything advanced       ●   HTML5
●   Design                  ●   Photoshop
●   Semantic markup         ●   Web systems
●   Responsive Web design
                            ●   Theming APIs
●   Typography
                            ●   Mobile devices
●   Grids (maybe a little
    bit)                    ●   Unicorns
●   CSS optimization        ●   Sprites
●   CSS preprocessing       ●   In-the-browser design
●   Rick Astley             ●   Sliding doors
●   PHP
                            ●   Gradients
●   Hooks
                            ●   IE6
Advanced Theming Sessions
Display Suite
Tuesday 17:00 - NodeOne Road - Fairfield Room
http://tinyurl.com/dclondon-displaysuite


Theming API
Tuesday 15:45 - NodeOne Road - Fairfield Room
http://tinyurl.com/dclondon-themingapi


Responsive Design
Thursday 11am - Axis 12 Street - Arnhem Gallery
http://tinyurl.com/dclondon-responsivedesign
Forensic Theming

       Best
       Practices
       Dissecting
       Themes
Agenda
Tools for Forensic Theming   Theming Tools
                                 Sketchbooks           CSS Frameworks
    Sweaver
                                                   ●
●                            ●



                                 Wireframes        ●   Base themes
    Firebug
                             ●
●
                             ●
                                 Data models       ●   Layout modules
●   Devel Themer             ●   Grid frameworks   ●   Text editors

Theme Building               Summary
●   Base themes              ●   Questions/Answers
●   Image extraction         ●   Bonuses
●   MVTs
●   Forensic styling
The Crime
Crime Scene
Forensic Theming


Definition: the art of
investigating a
Drupal page to find
out how that thing
got there.
Two Types of Clues
       Crime Scene Investigation
       Working with the rendered page:
       ●   Available CSS selectors.
       ●   Applied CSS styles.



       Crime Lab Forensics
       Working with Drupal code files:
       ●   Theme templates
       ●   Module templates
       ●   Hard coded module nonsense
Crime Scene




              Working with rendered
              pages. You can only look
              at the effects of Drupal
              on a rendered page.
Identifying CSS Selectors
               With Sweaver
●   Common newbie problem: being able to find
    relevant CSS selectors.
●   Sweaver can be used as a pointy-clicky-non-scary
    CSS class selector.
●   Can save/publish minor changes to CSS to live
    Web sites.
●   http://drupal.org/project/sweaver
Sweaver User Interface
Click on Stuff
See How a Selector Will Be Applied




Change CSS properties
                        See the changes


                                          CSS selector to use in your theme
Risky Live Demo
http://d7.sandbox/sweaver
Identifying What's Applied
                With Firebug
●
    Common newbie problem: trying to identifying
    what CSS styles are being applied by staring at
    code.
●   Firebug can be used to identify what CSS is
    actually being applied to a rendered Web page.
●   www.getfirebug.com
Locate Properties of Page Elements




Relevant HTML   Page element   CSS styles
source
Risky Live Firebug Demo
●
    http://d7.sandbox/sbe-site3/
●   Inspect element.
●   Edit CSS properties.
●   Edit CSS files.
●   Cannot publish changes.
●   www.getfirebug.com
Other Useful Browser Tools
●
    Web Developer Toolbar
    http://chrispederick.com/work/web-developer/
●   IE Web Developer Toolbar
    http://tinyurl.com/ie-web-dev-toolbar
Forensics
Devel / Themer
●   The Cadillac of theming tools.
●
    Tells you which tpl.php or theme function is
    responsible for that thing displaying over there.
●   http://drupal.org/project/devel_themer
●   http://drupal.org/project/devel
Point, Click, Analyse




                                                  3. Analyse the list of
                                                  functions, templates,
                          2. Click on the thing   variables, etc which
1. Enable Themer Info     you want to             control this page element.
                          investigate
Investigate What Themer Reveals




      Also go to: http://api.drupal.org
Ooops.
No risky live demo.
Making It Easier
node.tpl.php


                                 field.tpl.php


jplayer.tpl.php




                  page.tpl.php
content
I want less yucky markup!
Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/
Less Yucky Markup
●
    European vs American theming
●   Inheritance: start with a better base.
●   Base theme: mothership
●   Modules: Semantic Views
●   D6 Modules: Semantic CCK
●   HTML5 http://drupal.org/project/html5_tools
Theming Tools
Sketchbook
Wire Frames




       www.balsamiq.com
Data Model




    http://www.flickr.com/photos/alan-dean/3513723498
Grid Framework




http://960.gs/
Want to Learn Grids?
Harass @markboulton and tell him to finish his book.
http://www.fivesimplesteps.com/
Do it.
Right now.
Tweet him.
And tell him if he doesn't finish his book you're going
to build exclusively 16-column, grid-based Web sites
until his book his published.
CSS (Grid) Framework
Base Theme




●   drupal.org/project/ninesixty
●   drupal.org/project/fusion
●   drupal.org/project/zen
Drupal (Layout) Modules
●
    Context http://drupal.org/project/context
●   Display Suite http://drupal.org/project/ds
●   Panels http://drupal.org/project/panels
Text Editor
Use anything that doesn't make you
want to punch someone in the face.
Build me a theme!
Steps to Making a Theme
1. Communicate with your whole team.
2. Plan your data structure.
3. Use wire frames to prove what you're saying about how the
   site ought to be built.
4.Build the site (ignore the theme).
5. Convert your wire frame to a grid layout.
6.Build out the HTML fragments in the relevant tpl.php files.
7. Apply your theme to the site.
8.Refine as necessary based on the UX.
Domicile
●
    Designed by Betty Biesenthal.
●   Themed by Emma Jane Hogbin.
●   Available from http://drupal.org/project/domicile
●   Described in Drupal: a user's guide
Theme Folder

sites/example.com/themes/theme_name
   theme_name.info
   page.tpl.php



Also: sites/all/themes/base_theme
theme_name.info (1 of 2)
name = D7SBE - Domicile
description = A three-column design by Design House (www.design-house.ca) and themed by
Design to Theme.
screenshot = screenshot.png
core = 7.x
engine = phptemplate
base theme = ninesixty


; Stylesheets.
stylesheets[all][] = styles.css


; To show the 960.gs grid and debug your theme's layout, delete this section.
; You will be able to remove this when http://drupal.org/node/1032486 is rolled out
stylesheets[all][] = debug.css
theme_name.info (2 of 2)
; Regions
regions[nav_left]   = Navigation (left)
regions[feature_middle] = Feature column (middle)
regions[content] = Content column (right)
regions[copyright_footer] = Copyright notice (footer)


; Features
features[] = logo
features[] = name
features[] = favicon
page.tpl.php
Hard Code Relevant Images
Minimum Viable Theme
Locate Properties of Page Elements




Relevant HTML   Page element   CSS styles
source
styles.css
Domicile: the theme
Summary
●   Plan. Think. Build. Test. Theme. Iterate.
●   Use relevant Drupal modules to break up content and display it
    in relevant locations.
●   Use Sweaver to isolate selectors for your CSS files.
●   Use Firebug to diagnose and fix CSS problems.
●   Use Devel to isolate theme functions and variables.
●   Correlate the number of tpl and PHP files you edit to the size of
    your budget and amount of time you have.
The practical guide to building sites with Drupal.



                                              Pre-order eBook edition on




                                                    and SAVE 45%!


                                             Use Coupon Code
                                                          IUGD45
                                                  at Step 3 of Checkout




Available September 2011
Theming Birds of a Feather Sessions
●
    Advanced Theming
    Time slot: 24 August 13:45 – 14:45
    Room 333 Part 1
●
    Front End Development
    Time slot: 25 August 13:30 – 14:30
    Room 333 Part 2
●
    Theming in Drupal 8
    Time slot: 25 August 14:45 – 15:45
    Room 333 Part 2
What did you think?
      Locate this session on the DrupalCon London website:
      http://london2011.drupal.org/conference/schedule


Click the “Take the survey” link

Discounts'n'stuff                                BoFs
45% off Drupal User Guide                        Advanced Theming
www.informit.com Code: IUGD45                    Time slot: 24 August 13:45 – 14:45
                                                 Room 333 Part 1
45% off Design to Theme workbooks
www.designtotheme.com Code: DCLON87488           Front End Development
                                                 Time slot: 25 August 13:30 – 14:30
www.sitebuildingextravaganza.com                 Room 333 Part 2

@emmajanedotnet                                  Theming in Drupal 8
emma@designtotheme.com                           Time slot: 25 August 14:45 – 15:45
                                                 Room 333 Part 2
Forensic Theming - DrupalCon London

More Related Content

What's hot

Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDive into HTML5: SVG and Canvas
Dive into HTML5: SVG and Canvas
Doris Chen
 
JavaScript-Core
JavaScript-CoreJavaScript-Core
JavaScript-Core
tutorialsruby
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
Ashlimarie
 
Javascript Libraries
Javascript LibrariesJavascript Libraries
Javascript Libraries
elliando dias
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build them
Dick Olsson
 
Lecture 3 Javascript1
Lecture 3  Javascript1Lecture 3  Javascript1
Lecture 3 Javascript1
Sur College of Applied Sciences
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
Mallikarjuna G D
 
Clojurescript slides
Clojurescript slidesClojurescript slides
Clojurescript slides
elliando dias
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
Derek Christensen
 
Designers & Developers
Designers & DevelopersDesigners & Developers
Designers & Developers
André Luís
 
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
Geoff Varosky
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
Evan Mullins
 

What's hot (12)

Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDive into HTML5: SVG and Canvas
Dive into HTML5: SVG and Canvas
 
JavaScript-Core
JavaScript-CoreJavaScript-Core
JavaScript-Core
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Javascript Libraries
Javascript LibrariesJavascript Libraries
Javascript Libraries
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build them
 
Lecture 3 Javascript1
Lecture 3  Javascript1Lecture 3  Javascript1
Lecture 3 Javascript1
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
 
Clojurescript slides
Clojurescript slidesClojurescript slides
Clojurescript slides
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
 
Designers & Developers
Designers & DevelopersDesigners & Developers
Designers & Developers
 
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
 

Viewers also liked

Buenas practicas de uso de agua en servicios
Buenas practicas de uso de agua en serviciosBuenas practicas de uso de agua en servicios
Buenas practicas de uso de agua en servicios
Sergio Roberto Calderón Rivera
 
habitats_fluviales_red_URA.pdf
habitats_fluviales_red_URA.pdfhabitats_fluviales_red_URA.pdf
habitats_fluviales_red_URA.pdf
Irekia - EJGV
 
Presentacion Jornadas As Sistema
Presentacion Jornadas As SistemaPresentacion Jornadas As Sistema
Presentacion Jornadas As Sistema
Carlos Vacacela
 
Ficha 9
Ficha 9Ficha 9
Ficha 9
Elo Mora
 
Vip BLD (Business Link Direct)
Vip BLD (Business Link Direct)Vip BLD (Business Link Direct)
Vip BLD (Business Link Direct)
Lokacell
 
Practica de biologia n°01
Practica de biologia n°01Practica de biologia n°01
Practica de biologia n°01
Jeff CalderoOn
 
Columnas
Columnas Columnas
Columnas
Felipe Hincapie
 
Act 2 blog
Act 2 blogAct 2 blog
Act 2 blog
aleromero33
 
Quik Venues
Quik VenuesQuik Venues
Quik Venues
ThomasEll1
 
Pescado fresco
Pescado frescoPescado fresco
Pescado fresco
Alberto Ferreras
 
Presentació2102n1
Presentació2102n1Presentació2102n1
Presentació2102n1
josecarlosortaflores
 
Trabalho final roseny
Trabalho final  rosenyTrabalho final  roseny
Trabalho final roseny
Aline Chanan
 
Correcciones logistica
Correcciones logisticaCorrecciones logistica
Correcciones logistica
aulaclick
 
HERRAMIENTAS DE LA WEB 2.0 PARA CREAR Y PUBLICAR ARCHIVOS
HERRAMIENTAS DE LA WEB 2.0 PARA CREAR Y PUBLICAR ARCHIVOSHERRAMIENTAS DE LA WEB 2.0 PARA CREAR Y PUBLICAR ARCHIVOS
HERRAMIENTAS DE LA WEB 2.0 PARA CREAR Y PUBLICAR ARCHIVOS
EVANNYSOPHIA
 
Comp aula02 penal_comp
Comp aula02 penal_compComp aula02 penal_comp
Comp aula02 penal_comp
J M
 
eMarketer_China_Digital_Ad_Trends-Multiple_Forces_Driving_Growth
eMarketer_China_Digital_Ad_Trends-Multiple_Forces_Driving_GrowtheMarketer_China_Digital_Ad_Trends-Multiple_Forces_Driving_Growth
eMarketer_China_Digital_Ad_Trends-Multiple_Forces_Driving_Growth
GLG (Gerson Lehrman Group)
 
T Ips Metodologia Formacion Proyectos 1
T Ips Metodologia Formacion Proyectos 1T Ips Metodologia Formacion Proyectos 1
T Ips Metodologia Formacion Proyectos 1
francisco
 
Carlos verdun merchandising
Carlos verdun merchandisingCarlos verdun merchandising
Carlos verdun merchandising
merchandisingservice
 
Rodriguez sabina e2 modificado
Rodriguez sabina   e2 modificadoRodriguez sabina   e2 modificado
Rodriguez sabina e2 modificado
Rodriguez_Sabina
 
Memento
MementoMemento
Memento
guestf53addcc
 

Viewers also liked (20)

Buenas practicas de uso de agua en servicios
Buenas practicas de uso de agua en serviciosBuenas practicas de uso de agua en servicios
Buenas practicas de uso de agua en servicios
 
habitats_fluviales_red_URA.pdf
habitats_fluviales_red_URA.pdfhabitats_fluviales_red_URA.pdf
habitats_fluviales_red_URA.pdf
 
Presentacion Jornadas As Sistema
Presentacion Jornadas As SistemaPresentacion Jornadas As Sistema
Presentacion Jornadas As Sistema
 
Ficha 9
Ficha 9Ficha 9
Ficha 9
 
Vip BLD (Business Link Direct)
Vip BLD (Business Link Direct)Vip BLD (Business Link Direct)
Vip BLD (Business Link Direct)
 
Practica de biologia n°01
Practica de biologia n°01Practica de biologia n°01
Practica de biologia n°01
 
Columnas
Columnas Columnas
Columnas
 
Act 2 blog
Act 2 blogAct 2 blog
Act 2 blog
 
Quik Venues
Quik VenuesQuik Venues
Quik Venues
 
Pescado fresco
Pescado frescoPescado fresco
Pescado fresco
 
Presentació2102n1
Presentació2102n1Presentació2102n1
Presentació2102n1
 
Trabalho final roseny
Trabalho final  rosenyTrabalho final  roseny
Trabalho final roseny
 
Correcciones logistica
Correcciones logisticaCorrecciones logistica
Correcciones logistica
 
HERRAMIENTAS DE LA WEB 2.0 PARA CREAR Y PUBLICAR ARCHIVOS
HERRAMIENTAS DE LA WEB 2.0 PARA CREAR Y PUBLICAR ARCHIVOSHERRAMIENTAS DE LA WEB 2.0 PARA CREAR Y PUBLICAR ARCHIVOS
HERRAMIENTAS DE LA WEB 2.0 PARA CREAR Y PUBLICAR ARCHIVOS
 
Comp aula02 penal_comp
Comp aula02 penal_compComp aula02 penal_comp
Comp aula02 penal_comp
 
eMarketer_China_Digital_Ad_Trends-Multiple_Forces_Driving_Growth
eMarketer_China_Digital_Ad_Trends-Multiple_Forces_Driving_GrowtheMarketer_China_Digital_Ad_Trends-Multiple_Forces_Driving_Growth
eMarketer_China_Digital_Ad_Trends-Multiple_Forces_Driving_Growth
 
T Ips Metodologia Formacion Proyectos 1
T Ips Metodologia Formacion Proyectos 1T Ips Metodologia Formacion Proyectos 1
T Ips Metodologia Formacion Proyectos 1
 
Carlos verdun merchandising
Carlos verdun merchandisingCarlos verdun merchandising
Carlos verdun merchandising
 
Rodriguez sabina e2 modificado
Rodriguez sabina   e2 modificadoRodriguez sabina   e2 modificado
Rodriguez sabina e2 modificado
 
Memento
MementoMemento
Memento
 

Similar to Forensic Theming - DrupalCon London

Forensic Theming for Drupal
Forensic Theming for DrupalForensic Theming for Drupal
Forensic Theming for Drupal
Emma Jane Hogbin Westby
 
Theme customisation for beginners
Theme customisation for beginnersTheme customisation for beginners
Theme customisation for beginners
Gareth J Barnard
 
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Emma Jane Hogbin Westby
 
Drupal Flyover, CMS Expo
Drupal Flyover, CMS ExpoDrupal Flyover, CMS Expo
Drupal Flyover, CMS Expo
Emma Jane Hogbin Westby
 
There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010
Emma Jane Hogbin Westby
 
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and BeyondSpark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
Angela Byron
 
Design to Theme @ CMSExpo
Design to Theme @ CMSExpoDesign to Theme @ CMSExpo
Design to Theme @ CMSExpo
Emma Jane Hogbin Westby
 
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Acquia
 
Implementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing CompanyImplementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing Company
Marcos Labad
 
Architektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausArchitektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan Kraus
Women in Technology Poland
 
Becoming A Drupal Master Builder
Becoming A Drupal Master BuilderBecoming A Drupal Master Builder
Becoming A Drupal Master Builder
Philip Norton
 
Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for Clients
Steven Slack
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
Mediacurrent
 
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal StackDecoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
nuppla
 
Freelancer Weapons of mass productivity
Freelancer Weapons of mass productivityFreelancer Weapons of mass productivity
Freelancer Weapons of mass productivity
Gregg Coppen
 
Drupal: an Overview
Drupal: an OverviewDrupal: an Overview
Drupal: an Overview
Matt Weaver
 
Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014
Adrian Roselli
 
Drupal in-depth
Drupal in-depthDrupal in-depth
Drupal in-depth
Kathryn Carruthers
 
Responsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS ExpoResponsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS Expo
Emma Jane Hogbin Westby
 
Future proofing design work with Web components
Future proofing design work with Web componentsFuture proofing design work with Web components
Future proofing design work with Web components
btopro
 

Similar to Forensic Theming - DrupalCon London (20)

Forensic Theming for Drupal
Forensic Theming for DrupalForensic Theming for Drupal
Forensic Theming for Drupal
 
Theme customisation for beginners
Theme customisation for beginnersTheme customisation for beginners
Theme customisation for beginners
 
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
 
Drupal Flyover, CMS Expo
Drupal Flyover, CMS ExpoDrupal Flyover, CMS Expo
Drupal Flyover, CMS Expo
 
There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010
 
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and BeyondSpark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
 
Design to Theme @ CMSExpo
Design to Theme @ CMSExpoDesign to Theme @ CMSExpo
Design to Theme @ CMSExpo
 
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
 
Implementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing CompanyImplementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing Company
 
Architektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausArchitektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan Kraus
 
Becoming A Drupal Master Builder
Becoming A Drupal Master BuilderBecoming A Drupal Master Builder
Becoming A Drupal Master Builder
 
Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for Clients
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
 
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal StackDecoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
 
Freelancer Weapons of mass productivity
Freelancer Weapons of mass productivityFreelancer Weapons of mass productivity
Freelancer Weapons of mass productivity
 
Drupal: an Overview
Drupal: an OverviewDrupal: an Overview
Drupal: an Overview
 
Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014
 
Drupal in-depth
Drupal in-depthDrupal in-depth
Drupal in-depth
 
Responsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS ExpoResponsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS Expo
 
Future proofing design work with Web components
Future proofing design work with Web componentsFuture proofing design work with Web components
Future proofing design work with Web components
 

More from Emma Jane Hogbin Westby

Managing a Project the Drupal Way - Drupal Open Days Ireland
Managing a Project the Drupal Way - Drupal Open Days IrelandManaging a Project the Drupal Way - Drupal Open Days Ireland
Managing a Project the Drupal Way - Drupal Open Days Ireland
Emma Jane Hogbin Westby
 
Was it something I said?
Was it something I said?Was it something I said?
Was it something I said?
Emma Jane Hogbin Westby
 
HOWTO Empathy
HOWTO EmpathyHOWTO Empathy
Getting a CLUE at the Command Line
Getting a CLUE at the Command LineGetting a CLUE at the Command Line
Getting a CLUE at the Command Line
Emma Jane Hogbin Westby
 
Lessons From an Unlikely Superhero
Lessons From an Unlikely SuperheroLessons From an Unlikely Superhero
Lessons From an Unlikely Superhero
Emma Jane Hogbin Westby
 
PSD to Theme: The SMACSS Way
PSD to Theme: The SMACSS WayPSD to Theme: The SMACSS Way
PSD to Theme: The SMACSS Way
Emma Jane Hogbin Westby
 
Git Makes Me Angry Inside - DrupalCon Prague
Git Makes Me Angry Inside - DrupalCon PragueGit Makes Me Angry Inside - DrupalCon Prague
Git Makes Me Angry Inside - DrupalCon Prague
Emma Jane Hogbin Westby
 
Git Makes Me Angry Inside
Git Makes Me Angry InsideGit Makes Me Angry Inside
Git Makes Me Angry Inside
Emma Jane Hogbin Westby
 
Was It Something I Said? The Art of Giving (and getting) A Critique
Was It Something I Said? The Art of Giving (and getting) A CritiqueWas It Something I Said? The Art of Giving (and getting) A Critique
Was It Something I Said? The Art of Giving (and getting) A Critique
Emma Jane Hogbin Westby
 
Beyond the Bikeshed
Beyond the BikeshedBeyond the Bikeshed
Beyond the Bikeshed
Emma Jane Hogbin Westby
 
Gamestorming Meets Quiet
Gamestorming Meets QuietGamestorming Meets Quiet
Gamestorming Meets Quiet
Emma Jane Hogbin Westby
 
Git Makes Me Angry Inside
Git Makes Me Angry InsideGit Makes Me Angry Inside
Git Makes Me Angry Inside
Emma Jane Hogbin Westby
 
Work Flow for Solo Developers and Small Teams
Work Flow for Solo Developers and Small TeamsWork Flow for Solo Developers and Small Teams
Work Flow for Solo Developers and Small Teams
Emma Jane Hogbin Westby
 
Speaker Check-in - 3 - Munich
Speaker Check-in - 3 - MunichSpeaker Check-in - 3 - Munich
Speaker Check-in - 3 - Munich
Emma Jane Hogbin Westby
 
Selling Hopes and Dreams - DrupalCamp Toronto
Selling Hopes and Dreams - DrupalCamp TorontoSelling Hopes and Dreams - DrupalCamp Toronto
Selling Hopes and Dreams - DrupalCamp Toronto
Emma Jane Hogbin Westby
 
Advanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpoAdvanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpo
Emma Jane Hogbin Westby
 
Drupal Help System
Drupal Help SystemDrupal Help System
Drupal Help System
Emma Jane Hogbin Westby
 
Lessons from Life Coaching for Linux
Lessons from Life Coaching for LinuxLessons from Life Coaching for Linux
Lessons from Life Coaching for Linux
Emma Jane Hogbin Westby
 
Beautiful In Print
Beautiful In PrintBeautiful In Print
Beautiful In Print
Emma Jane Hogbin Westby
 
We Economy - Drupalsouth
We Economy - DrupalsouthWe Economy - Drupalsouth
We Economy - Drupalsouth
Emma Jane Hogbin Westby
 

More from Emma Jane Hogbin Westby (20)

Managing a Project the Drupal Way - Drupal Open Days Ireland
Managing a Project the Drupal Way - Drupal Open Days IrelandManaging a Project the Drupal Way - Drupal Open Days Ireland
Managing a Project the Drupal Way - Drupal Open Days Ireland
 
Was it something I said?
Was it something I said?Was it something I said?
Was it something I said?
 
HOWTO Empathy
HOWTO EmpathyHOWTO Empathy
HOWTO Empathy
 
Getting a CLUE at the Command Line
Getting a CLUE at the Command LineGetting a CLUE at the Command Line
Getting a CLUE at the Command Line
 
Lessons From an Unlikely Superhero
Lessons From an Unlikely SuperheroLessons From an Unlikely Superhero
Lessons From an Unlikely Superhero
 
PSD to Theme: The SMACSS Way
PSD to Theme: The SMACSS WayPSD to Theme: The SMACSS Way
PSD to Theme: The SMACSS Way
 
Git Makes Me Angry Inside - DrupalCon Prague
Git Makes Me Angry Inside - DrupalCon PragueGit Makes Me Angry Inside - DrupalCon Prague
Git Makes Me Angry Inside - DrupalCon Prague
 
Git Makes Me Angry Inside
Git Makes Me Angry InsideGit Makes Me Angry Inside
Git Makes Me Angry Inside
 
Was It Something I Said? The Art of Giving (and getting) A Critique
Was It Something I Said? The Art of Giving (and getting) A CritiqueWas It Something I Said? The Art of Giving (and getting) A Critique
Was It Something I Said? The Art of Giving (and getting) A Critique
 
Beyond the Bikeshed
Beyond the BikeshedBeyond the Bikeshed
Beyond the Bikeshed
 
Gamestorming Meets Quiet
Gamestorming Meets QuietGamestorming Meets Quiet
Gamestorming Meets Quiet
 
Git Makes Me Angry Inside
Git Makes Me Angry InsideGit Makes Me Angry Inside
Git Makes Me Angry Inside
 
Work Flow for Solo Developers and Small Teams
Work Flow for Solo Developers and Small TeamsWork Flow for Solo Developers and Small Teams
Work Flow for Solo Developers and Small Teams
 
Speaker Check-in - 3 - Munich
Speaker Check-in - 3 - MunichSpeaker Check-in - 3 - Munich
Speaker Check-in - 3 - Munich
 
Selling Hopes and Dreams - DrupalCamp Toronto
Selling Hopes and Dreams - DrupalCamp TorontoSelling Hopes and Dreams - DrupalCamp Toronto
Selling Hopes and Dreams - DrupalCamp Toronto
 
Advanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpoAdvanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpo
 
Drupal Help System
Drupal Help SystemDrupal Help System
Drupal Help System
 
Lessons from Life Coaching for Linux
Lessons from Life Coaching for LinuxLessons from Life Coaching for Linux
Lessons from Life Coaching for Linux
 
Beautiful In Print
Beautiful In PrintBeautiful In Print
Beautiful In Print
 
We Economy - Drupalsouth
We Economy - DrupalsouthWe Economy - Drupalsouth
We Economy - Drupalsouth
 

Recently uploaded

GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Neo4j
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 

Recently uploaded (20)

GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 

Forensic Theming - DrupalCon London

  • 1. Design, UX and Theming Forensic Theming Emma Jane Hogbin @emmajanedotnet www.designtotheme.com
  • 2. drupal.org participation ● emmajane ● uid: 1773 ● First look at the Drupal code base: 2003ish. I stole the i18n table structure. ● First Drupal site “for pay”: 2006ish. ● First Drupal socks: 2007. ● First DrupalCon conference: Szeged in 2008. ● First Drupal book: 2009. ● First Drupal core patch: 2010. Removed the “welcome” screen.
  • 3. Really Tiny Web Budgets
  • 7. Workbook Author www.designtotheme.com Discount Code: DCLON87488 Valid to the end of August.
  • 9. Lazy Front End Developer
  • 10. I'll just change this one tpl.php file http://www.flickr.com/photos/gibbons/2500423526
  • 11. Okay ... and a module file?
  • 13. ... everything else too? Bugger. http://www.flickr.com/photos/amagill/3225245292
  • 14. This presentation is not about ... ● Best practices ● Inheritance ● Anything advanced ● HTML5 ● Design ● Photoshop ● Semantic markup ● Web systems ● Responsive Web design ● Theming APIs ● Typography ● Mobile devices ● Grids (maybe a little bit) ● Unicorns ● CSS optimization ● Sprites ● CSS preprocessing ● In-the-browser design ● Rick Astley ● Sliding doors ● PHP ● Gradients ● Hooks ● IE6
  • 15. Advanced Theming Sessions Display Suite Tuesday 17:00 - NodeOne Road - Fairfield Room http://tinyurl.com/dclondon-displaysuite Theming API Tuesday 15:45 - NodeOne Road - Fairfield Room http://tinyurl.com/dclondon-themingapi Responsive Design Thursday 11am - Axis 12 Street - Arnhem Gallery http://tinyurl.com/dclondon-responsivedesign
  • 16. Forensic Theming Best Practices Dissecting Themes
  • 17. Agenda Tools for Forensic Theming Theming Tools Sketchbooks CSS Frameworks Sweaver ● ● ● Wireframes ● Base themes Firebug ● ● ● Data models ● Layout modules ● Devel Themer ● Grid frameworks ● Text editors Theme Building Summary ● Base themes ● Questions/Answers ● Image extraction ● Bonuses ● MVTs ● Forensic styling
  • 20. Forensic Theming Definition: the art of investigating a Drupal page to find out how that thing got there.
  • 21. Two Types of Clues Crime Scene Investigation Working with the rendered page: ● Available CSS selectors. ● Applied CSS styles. Crime Lab Forensics Working with Drupal code files: ● Theme templates ● Module templates ● Hard coded module nonsense
  • 22. Crime Scene Working with rendered pages. You can only look at the effects of Drupal on a rendered page.
  • 23. Identifying CSS Selectors With Sweaver ● Common newbie problem: being able to find relevant CSS selectors. ● Sweaver can be used as a pointy-clicky-non-scary CSS class selector. ● Can save/publish minor changes to CSS to live Web sites. ● http://drupal.org/project/sweaver
  • 26. See How a Selector Will Be Applied Change CSS properties See the changes CSS selector to use in your theme
  • 28. Identifying What's Applied With Firebug ● Common newbie problem: trying to identifying what CSS styles are being applied by staring at code. ● Firebug can be used to identify what CSS is actually being applied to a rendered Web page. ● www.getfirebug.com
  • 29. Locate Properties of Page Elements Relevant HTML Page element CSS styles source
  • 30. Risky Live Firebug Demo ● http://d7.sandbox/sbe-site3/ ● Inspect element. ● Edit CSS properties. ● Edit CSS files. ● Cannot publish changes. ● www.getfirebug.com
  • 31. Other Useful Browser Tools ● Web Developer Toolbar http://chrispederick.com/work/web-developer/ ● IE Web Developer Toolbar http://tinyurl.com/ie-web-dev-toolbar
  • 33. Devel / Themer ● The Cadillac of theming tools. ● Tells you which tpl.php or theme function is responsible for that thing displaying over there. ● http://drupal.org/project/devel_themer ● http://drupal.org/project/devel
  • 34. Point, Click, Analyse 3. Analyse the list of functions, templates, 2. Click on the thing variables, etc which 1. Enable Themer Info you want to control this page element. investigate
  • 35. Investigate What Themer Reveals Also go to: http://api.drupal.org
  • 37. No risky live demo.
  • 39. node.tpl.php field.tpl.php jplayer.tpl.php page.tpl.php
  • 41. I want less yucky markup! Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/
  • 42.
  • 43. Less Yucky Markup ● European vs American theming ● Inheritance: start with a better base. ● Base theme: mothership ● Modules: Semantic Views ● D6 Modules: Semantic CCK ● HTML5 http://drupal.org/project/html5_tools
  • 46. Wire Frames www.balsamiq.com
  • 47. Data Model http://www.flickr.com/photos/alan-dean/3513723498
  • 49. Want to Learn Grids? Harass @markboulton and tell him to finish his book. http://www.fivesimplesteps.com/ Do it. Right now. Tweet him. And tell him if he doesn't finish his book you're going to build exclusively 16-column, grid-based Web sites until his book his published.
  • 51. Base Theme ● drupal.org/project/ninesixty ● drupal.org/project/fusion ● drupal.org/project/zen
  • 52. Drupal (Layout) Modules ● Context http://drupal.org/project/context ● Display Suite http://drupal.org/project/ds ● Panels http://drupal.org/project/panels
  • 53. Text Editor Use anything that doesn't make you want to punch someone in the face.
  • 54. Build me a theme!
  • 55. Steps to Making a Theme 1. Communicate with your whole team. 2. Plan your data structure. 3. Use wire frames to prove what you're saying about how the site ought to be built. 4.Build the site (ignore the theme). 5. Convert your wire frame to a grid layout. 6.Build out the HTML fragments in the relevant tpl.php files. 7. Apply your theme to the site. 8.Refine as necessary based on the UX.
  • 56. Domicile ● Designed by Betty Biesenthal. ● Themed by Emma Jane Hogbin. ● Available from http://drupal.org/project/domicile ● Described in Drupal: a user's guide
  • 57.
  • 58.
  • 59.
  • 61. theme_name.info (1 of 2) name = D7SBE - Domicile description = A three-column design by Design House (www.design-house.ca) and themed by Design to Theme. screenshot = screenshot.png core = 7.x engine = phptemplate base theme = ninesixty ; Stylesheets. stylesheets[all][] = styles.css ; To show the 960.gs grid and debug your theme's layout, delete this section. ; You will be able to remove this when http://drupal.org/node/1032486 is rolled out stylesheets[all][] = debug.css
  • 62. theme_name.info (2 of 2) ; Regions regions[nav_left] = Navigation (left) regions[feature_middle] = Feature column (middle) regions[content] = Content column (right) regions[copyright_footer] = Copyright notice (footer) ; Features features[] = logo features[] = name features[] = favicon
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 71. Locate Properties of Page Elements Relevant HTML Page element CSS styles source
  • 74. Summary ● Plan. Think. Build. Test. Theme. Iterate. ● Use relevant Drupal modules to break up content and display it in relevant locations. ● Use Sweaver to isolate selectors for your CSS files. ● Use Firebug to diagnose and fix CSS problems. ● Use Devel to isolate theme functions and variables. ● Correlate the number of tpl and PHP files you edit to the size of your budget and amount of time you have.
  • 75. The practical guide to building sites with Drupal. Pre-order eBook edition on and SAVE 45%! Use Coupon Code IUGD45 at Step 3 of Checkout Available September 2011
  • 76. Theming Birds of a Feather Sessions ● Advanced Theming Time slot: 24 August 13:45 – 14:45 Room 333 Part 1 ● Front End Development Time slot: 25 August 13:30 – 14:30 Room 333 Part 2 ● Theming in Drupal 8 Time slot: 25 August 14:45 – 15:45 Room 333 Part 2
  • 77. What did you think? Locate this session on the DrupalCon London website: http://london2011.drupal.org/conference/schedule Click the “Take the survey” link Discounts'n'stuff BoFs 45% off Drupal User Guide Advanced Theming www.informit.com Code: IUGD45 Time slot: 24 August 13:45 – 14:45 Room 333 Part 1 45% off Design to Theme workbooks www.designtotheme.com Code: DCLON87488 Front End Development Time slot: 25 August 13:30 – 14:30 www.sitebuildingextravaganza.com Room 333 Part 2 @emmajanedotnet Theming in Drupal 8 emma@designtotheme.com Time slot: 25 August 14:45 – 15:45 Room 333 Part 2