SlideShare a Scribd company logo
Advanced Design for Drupal

               Emma Jane Hogbin
               @emmajanedotnet
        emma@designtotheme.com
          www.designtotheme.com
Agenda
●   Why advanced layout modules.
●   Fusion and Skinr--a CSS selector
    toolkit.
●   Panels for layout.
●   Context-sensitive content with
    Panels.
●   Moving forward: Making the right
    decision for your site.
Applying Styles in
      Volatile Environments




I wish the developer and
   manager would stop
     fighting so that
  I could just make the
  effing theme already.
Enforce a Style Guide
●   Skinr allows you to re-use your CSS file of basic
    elements.
●   Re-using your Skinr styles on all projects will ensure no
    (common) element gets left behind.
●   Alternate ways of solving the style guide problem:
    ● www.tinyurl.com/drupal-fireworks-templates
    ● www.zivtech.com/zivtech-style-guide
Use Theme Settings + Skinr
          to Apply Your Styles
          to Similar Elements
The following     May share:
elements:         ●   Fonts: Weight, Size, Face,
                      Colour
●   Headings
                  ●   Edge styles: Borders +
●   Body text         Padding + Rounded
●   Blocks            Corners
                  ●   Background Colour
●   Images
                  ●   Element width and height
Fusion
Fusion is a theme. Themes can have
display settings and groups of CSS
attributes (“adjectives”).
              Layout grid
                                                           Edge treatments


                      Breadcrumb settings (separator)
 Headings
                                 Background colour


 Theme Developer Helpers
                                                        Username formatting

                Font styles
Theme Settings
(Zen NineSixty & Acquia Prosper)
Theme
Configuration
●   Fusion settings
    alter HTML and
    apply CSS.
●   Blocks are placed
    into pink regions.
●   Individual blocks
    may be “skinned”
    to alter their
    appearance &
    layout.
Applying Settings with Skinr
●   Skinr is a module. Modules can perform tasks
    (“verbs”).
●   Skinr’s GUI replaces custom CSS selectors in
    your theme’s CSS files by giving you a pointy-
    clicky interface to apply your CSS rules.
●   Skinr is “just” a selector tool, you must still
    write CSS rules before you can apply them with
    the pointy-clicky interface.
Using Skinr in Your Theme
1.Create re-usable CSS styles in your
 theme.
2.Add Skinr hooks in the info file.
3.Include the variable $skinr in theme
 tpls.
4.In the UI, apply skins to applicable
 page elements.
Skinr Config Settings
Extracted from acquia_slate.info

; Acquia Slate background styles
skinr[slate­background­styles][title] = Background Styles
skinr[slate­background­styles][type] = radios
skinr[slate­background­styles][features][] = block
skinr[slate­background­styles][features][] = panels_display
skinr[slate­background­styles][features][] = panels_pane
skinr[slate­background­styles][features][] = panels_panel
skinr[slate­background­styles][features][] = views_view
skinr[slate­background­styles][options][1][label] = Dark transparent 
background
skinr[slate­background­styles][options][1][class] = dark­
transparent­background
Attach the Theme to Skinr
From page.tpl.php
<body id="<?php print $body_id; ?>" class="<?php 
print $body_classes; ?> <?php print $skinr; ?>">



From block.tpl.php
<div id="block­<?php print $block­>module .'­'. 
$block­>delta; ?>" class="block block­<?php 
print $block­>module ?> <?php print 
$block_zebra; ?> <?php print $position; ?> <?php 
print $skinr; ?>">
Editing Skin (Page) Settings
Sample Site
Getting Started with Skinr and Fusion
drupal.org/project/skinr
●   DrupalConSF Video: http://tinyurl.com/theming-skinr
●   Install Skinr: http://tinyurl.com/install-skinr-2x
●   Sharing Snippets: http://fusiondrupalthemes.com/snippets

drupal.org/project/fusion
●   DrupalConSF Video: http://tinyurl.com/theming-fusion
●   Webenabled site: http://tinyurl.com/testdrive-fusion
Point + Click Layout with Panels
Benefits of Panels
Highly customizable layout without PHP or other theme
manipulation. (This is great for clients that can't make up
their mind what should be on the front page of a site, or in
a specific section.)
Display context-sensitive content. (Use the same layout
throughout the site, but unique content displaying based
on the taxonomy term selected WITHOUT having to build
unique views and have unique page templates).
Place the same block into multiple regions on the same
page. (Because Drupal only lets you have a block in one
place for your entire Web site.)
Panels for Layout Only
Use Panels when:
●   Your site layout is highly volatile.
●   You want to display the same block in multiple
    regions.


Avoid Panels if:
●   You can accomplish your layout with finer
    grained regions and block settings.
●   You can easily create duplicates of your blocks.
2 Column Panel Layout
...sscrolll down ....
One Block, Two Places, Three Cheers




Same “random image” block in TWO PLACES AT ONCE!
Install and Configure Panels
●   Modules you will need to download:
    Panels
    ●


  ● Ctools


  ● Advanced help


  ● Views (and Views UI)


● Modules to Install


    ● (All of the modules listed above)
    ● Page manager


    ● Views content panes


    ● Panel nodes to have panels appear in search results.


    ● Mini panels to divide panes into more panes.
Panel Dashboard: ready to go
<insert live demo here>
Just in case the demo fails:




                          o ut
                      l ay                                            ut
                  a                                             e layo
             se                                          ) to th
         o                                          ws
      ho                                     s , vie
 .C                                  ks, node
1                      (         bloc
               d stuff
         2. Ad
Panels Demo Summary
If all went well this is what happened:
●   Sub-divide $content into multiple
    panes.
●   Add node, blocks, views to the panel
    layout.
●   Assign a custom URL for the panel
    page.
●   Promote the panel to the front page.
Context-sensitive Content
M: Ah. I'd like to have an argument, please.
R: Certainly sir. Have you been here before?
M: No, I haven't, this is my first time.
       http://www.scottberkun.com/wp-content/themes/scottberkun/images/40-1.jpg
“Context”
●   Three contrib modules tackle this problem
    for Drupal:
    Panels
    ●


  ● Context (goes well with CustomPage)


  ● Display Suite


● Efforts are being made to incorporate


  “context” into core for D8. Yes, eight.
Context-sensitive Content
●   Drupal pages know very little about
    themselves.
●   Context allows relationships
    between:
    ● page elements.
    ● URLs and page elements.
Context Rules
taxonomy             Last Night     Hallway Tracks   During Presentations




    layout options                Cussing             Clothing
      content displayed




             Final page render
Context Rules
Last Night     Hallway Tracks   During Presentations




             Cussing             Clothing
Panels for Layout
Panels with Context, part 1
Panels with Context, part 2
Side-By-Side
Arguments
Variants Summary
Content of Variant
Summary
●   Use appropriate tools to mitigate
    volatile situations.
●   Abstract styles and re-use them.
●   Abstract layouts and re-use them.
●   Skinr, Fusion and Panels are
    “advanced layout” modules and
    themes you may want to try on your
    site.
And that was ...
Advanced Design for Drupal
              Emma Jane Hogbin
              @emmajanedotnet
       emma@designtotheme.com
         www.designtotheme.com

          Online classes starting May 11

More Related Content

Similar to Advanced Layout Techniques @ CMSExpo

Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon LondonForensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
Emma Jane Hogbin Westby
 
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
 
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers Perspective
Mediacurrent
 
Dev tools rendering & memory profiling
Dev tools rendering & memory profilingDev tools rendering & memory profiling
Dev tools rendering & memory profiling
Open Academy
 
Drupalcamp Atlanta 2010 Design-to-Theme
Drupalcamp Atlanta 2010 Design-to-ThemeDrupalcamp Atlanta 2010 Design-to-Theme
Drupalcamp Atlanta 2010 Design-to-Theme
Mediacurrent
 
Roman Chernov.Panels custom layouts.DrupalCampKyiv 2011
Roman Chernov.Panels custom layouts.DrupalCampKyiv 2011Roman Chernov.Panels custom layouts.DrupalCampKyiv 2011
Roman Chernov.Panels custom layouts.DrupalCampKyiv 2011
camp_drupal_ua
 
10 steps to becoming a panels pro
10 steps to becoming a panels pro10 steps to becoming a panels pro
10 steps to becoming a panels pro
Green For All
 

Similar to Advanced Layout Techniques @ CMSExpo (20)

Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon LondonForensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
 
Forensic Theming for Drupal
Forensic Theming for DrupalForensic Theming for Drupal
Forensic Theming for Drupal
 
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
 
Dig into the omega theme
Dig into the omega themeDig into the omega theme
Dig into the omega theme
 
Lavacon 2014 responsive design in your hat
Lavacon 2014   responsive design in your hatLavacon 2014   responsive design in your hat
Lavacon 2014 responsive design in your hat
 
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers Perspective
 
Dev tools rendering & memory profiling
Dev tools rendering & memory profilingDev tools rendering & memory profiling
Dev tools rendering & memory profiling
 
Google Chrome DevTools: Rendering & Memory profiling on Open Academy 2013
Google Chrome DevTools: Rendering & Memory profiling on Open Academy 2013Google Chrome DevTools: Rendering & Memory profiling on Open Academy 2013
Google Chrome DevTools: Rendering & Memory profiling on Open Academy 2013
 
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites
 
Layar Tutorial - 3D Content Creation Tips & Tricks
Layar Tutorial - 3D Content Creation Tips & TricksLayar Tutorial - 3D Content Creation Tips & Tricks
Layar Tutorial - 3D Content Creation Tips & Tricks
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
 
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
 
HTML and CSS.pptx
HTML and CSS.pptxHTML and CSS.pptx
HTML and CSS.pptx
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
Drupalcamp Atlanta 2010 Design-to-Theme
Drupalcamp Atlanta 2010 Design-to-ThemeDrupalcamp Atlanta 2010 Design-to-Theme
Drupalcamp Atlanta 2010 Design-to-Theme
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
Roman Chernov.Panels custom layouts.DrupalCampKyiv 2011
Roman Chernov.Panels custom layouts.DrupalCampKyiv 2011Roman Chernov.Panels custom layouts.DrupalCampKyiv 2011
Roman Chernov.Panels custom layouts.DrupalCampKyiv 2011
 
Embracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyEmbracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think Responsively
 
Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for Clients
 
10 steps to becoming a panels pro
10 steps to becoming a panels pro10 steps to becoming a panels pro
10 steps to becoming a panels pro
 

More from Emma Jane Hogbin Westby

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
 
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
 
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
 
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
 
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
 

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?
 
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
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
 
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
 
Evaluating Base Themes
Evaluating Base ThemesEvaluating Base Themes
Evaluating Base Themes
 
Speaker Check-in - 3 - Munich
Speaker Check-in - 3 - MunichSpeaker Check-in - 3 - Munich
Speaker Check-in - 3 - Munich
 
Drupal Flyover, CMS Expo
Drupal Flyover, CMS ExpoDrupal Flyover, CMS Expo
Drupal Flyover, CMS Expo
 
Selling Hopes and Dreams - DrupalCamp Toronto
Selling Hopes and Dreams - DrupalCamp TorontoSelling Hopes and Dreams - DrupalCamp Toronto
Selling Hopes and Dreams - DrupalCamp Toronto
 
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
 
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
 
Design to Theme @ CMSExpo
Design to Theme @ CMSExpoDesign to Theme @ CMSExpo
Design to Theme @ 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
 

Recently uploaded

Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 

Recently uploaded (20)

What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
Enterprise Security Monitoring, And Log Management.
Enterprise Security Monitoring, And Log Management.Enterprise Security Monitoring, And Log Management.
Enterprise Security Monitoring, And Log Management.
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
 
Introduction to Open Source RAG and RAG Evaluation
Introduction to Open Source RAG and RAG EvaluationIntroduction to Open Source RAG and RAG Evaluation
Introduction to Open Source RAG and RAG Evaluation
 
Transforming The New York Times: Empowering Evolution through UX
Transforming The New York Times: Empowering Evolution through UXTransforming The New York Times: Empowering Evolution through UX
Transforming The New York Times: Empowering Evolution through UX
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 

Advanced Layout Techniques @ CMSExpo

  • 1. Advanced Design for Drupal Emma Jane Hogbin @emmajanedotnet emma@designtotheme.com www.designtotheme.com
  • 2. Agenda ● Why advanced layout modules. ● Fusion and Skinr--a CSS selector toolkit. ● Panels for layout. ● Context-sensitive content with Panels. ● Moving forward: Making the right decision for your site.
  • 3. Applying Styles in Volatile Environments I wish the developer and manager would stop fighting so that I could just make the effing theme already.
  • 4. Enforce a Style Guide ● Skinr allows you to re-use your CSS file of basic elements. ● Re-using your Skinr styles on all projects will ensure no (common) element gets left behind. ● Alternate ways of solving the style guide problem: ● www.tinyurl.com/drupal-fireworks-templates ● www.zivtech.com/zivtech-style-guide
  • 5. Use Theme Settings + Skinr to Apply Your Styles to Similar Elements The following May share: elements: ● Fonts: Weight, Size, Face, Colour ● Headings ● Edge styles: Borders + ● Body text Padding + Rounded ● Blocks Corners ● Background Colour ● Images ● Element width and height
  • 6. Fusion Fusion is a theme. Themes can have display settings and groups of CSS attributes (“adjectives”). Layout grid Edge treatments Breadcrumb settings (separator) Headings Background colour Theme Developer Helpers Username formatting Font styles
  • 7. Theme Settings (Zen NineSixty & Acquia Prosper)
  • 8. Theme Configuration ● Fusion settings alter HTML and apply CSS. ● Blocks are placed into pink regions. ● Individual blocks may be “skinned” to alter their appearance & layout.
  • 9. Applying Settings with Skinr ● Skinr is a module. Modules can perform tasks (“verbs”). ● Skinr’s GUI replaces custom CSS selectors in your theme’s CSS files by giving you a pointy- clicky interface to apply your CSS rules. ● Skinr is “just” a selector tool, you must still write CSS rules before you can apply them with the pointy-clicky interface.
  • 10. Using Skinr in Your Theme 1.Create re-usable CSS styles in your theme. 2.Add Skinr hooks in the info file. 3.Include the variable $skinr in theme tpls. 4.In the UI, apply skins to applicable page elements.
  • 11. Skinr Config Settings Extracted from acquia_slate.info ; Acquia Slate background styles skinr[slate­background­styles][title] = Background Styles skinr[slate­background­styles][type] = radios skinr[slate­background­styles][features][] = block skinr[slate­background­styles][features][] = panels_display skinr[slate­background­styles][features][] = panels_pane skinr[slate­background­styles][features][] = panels_panel skinr[slate­background­styles][features][] = views_view skinr[slate­background­styles][options][1][label] = Dark transparent  background skinr[slate­background­styles][options][1][class] = dark­ transparent­background
  • 12. Attach the Theme to Skinr From page.tpl.php <body id="<?php print $body_id; ?>" class="<?php  print $body_classes; ?> <?php print $skinr; ?>"> From block.tpl.php <div id="block­<?php print $block­>module .'­'.  $block­>delta; ?>" class="block block­<?php  print $block­>module ?> <?php print  $block_zebra; ?> <?php print $position; ?> <?php  print $skinr; ?>">
  • 15. Getting Started with Skinr and Fusion drupal.org/project/skinr ● DrupalConSF Video: http://tinyurl.com/theming-skinr ● Install Skinr: http://tinyurl.com/install-skinr-2x ● Sharing Snippets: http://fusiondrupalthemes.com/snippets drupal.org/project/fusion ● DrupalConSF Video: http://tinyurl.com/theming-fusion ● Webenabled site: http://tinyurl.com/testdrive-fusion
  • 16. Point + Click Layout with Panels
  • 17. Benefits of Panels Highly customizable layout without PHP or other theme manipulation. (This is great for clients that can't make up their mind what should be on the front page of a site, or in a specific section.) Display context-sensitive content. (Use the same layout throughout the site, but unique content displaying based on the taxonomy term selected WITHOUT having to build unique views and have unique page templates). Place the same block into multiple regions on the same page. (Because Drupal only lets you have a block in one place for your entire Web site.)
  • 18. Panels for Layout Only Use Panels when: ● Your site layout is highly volatile. ● You want to display the same block in multiple regions. Avoid Panels if: ● You can accomplish your layout with finer grained regions and block settings. ● You can easily create duplicates of your blocks.
  • 19. 2 Column Panel Layout
  • 21. One Block, Two Places, Three Cheers Same “random image” block in TWO PLACES AT ONCE!
  • 22. Install and Configure Panels ● Modules you will need to download: Panels ● ● Ctools ● Advanced help ● Views (and Views UI) ● Modules to Install ● (All of the modules listed above) ● Page manager ● Views content panes ● Panel nodes to have panels appear in search results. ● Mini panels to divide panes into more panes.
  • 25. Just in case the demo fails: o ut l ay ut a e layo se ) to th o ws ho s , vie .C ks, node 1 ( bloc d stuff 2. Ad
  • 26. Panels Demo Summary If all went well this is what happened: ● Sub-divide $content into multiple panes. ● Add node, blocks, views to the panel layout. ● Assign a custom URL for the panel page. ● Promote the panel to the front page.
  • 28. M: Ah. I'd like to have an argument, please. R: Certainly sir. Have you been here before? M: No, I haven't, this is my first time. http://www.scottberkun.com/wp-content/themes/scottberkun/images/40-1.jpg
  • 29. “Context” ● Three contrib modules tackle this problem for Drupal: Panels ● ● Context (goes well with CustomPage) ● Display Suite ● Efforts are being made to incorporate “context” into core for D8. Yes, eight.
  • 30. Context-sensitive Content ● Drupal pages know very little about themselves. ● Context allows relationships between: ● page elements. ● URLs and page elements.
  • 31. Context Rules taxonomy Last Night Hallway Tracks During Presentations layout options Cussing Clothing content displayed Final page render
  • 32. Context Rules Last Night Hallway Tracks During Presentations Cussing Clothing
  • 40. Summary ● Use appropriate tools to mitigate volatile situations. ● Abstract styles and re-use them. ● Abstract layouts and re-use them. ● Skinr, Fusion and Panels are “advanced layout” modules and themes you may want to try on your site.
  • 41. And that was ... Advanced Design for Drupal Emma Jane Hogbin @emmajanedotnet emma@designtotheme.com www.designtotheme.com Online classes starting May 11