Advanced Design for Drupal

               Emma Jane Hogbin
               @emmajanedotnet
        emma@designtotheme.com
...
Agenda
●   Why advanced layout modules.
●   Fusion and Skinr--a CSS selector
    toolkit.
●   Panels for layout.
●   Conte...
Applying Styles in
      Volatile Environments




I wish the developer and
   manager would stop
     fighting so that
  ...
Enforce a Style Guide
●   Skinr allows you to re-use your CSS file of basic
    elements.
●   Re-using your Skinr styles o...
Use Theme Settings + Skinr
          to Apply Your Styles
          to Similar Elements
The following     May share:
eleme...
Fusion
Fusion is a theme. Themes can have
display settings and groups of CSS
attributes (“adjectives”).
              Layo...
Theme Settings
(Zen NineSixty & Acquia Prosper)
Theme
Configuration
●   Fusion settings
    alter HTML and
    apply CSS.
●   Blocks are placed
    into pink regions.
●  ...
Applying Settings with Skinr
●   Skinr is a module. Modules can perform tasks
    (“verbs”).
●   Skinr’s GUI replaces cust...
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 ...
Skinr Config Settings
Extracted from acquia_slate.info

; Acquia Slate background styles
skinr[slate­background­styles][ti...
Attach the Theme to Skinr
From page.tpl.php
<body id="<?php print $body_id; ?>" class="<?php 
print $body_classes; ?> <?ph...
Editing Skin (Page) Settings
Sample Site
Getting Started with Skinr and Fusion
drupal.org/project/skinr
●   DrupalConSF Video: http://tinyurl.com/theming-skinr
●  ...
Point + Click Layout with Panels
Benefits of Panels
Highly customizable layout without PHP or other theme
manipulation. (This is great for clients that can...
Panels for Layout Only
Use Panels when:
●   Your site layout is highly volatile.
●   You want to display the same block in...
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


  ...
Panel Dashboard: ready to go
<insert live demo here>
Just in case the demo fails:




                          o ut
                      l ay                                ...
Panels Demo Summary
If all went well this is what happened:
●   Sub-divide $content into multiple
    panes.
●   Add node,...
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 fir...
“Context”
●   Three contrib modules tackle this problem
    for Drupal:
    Panels
    ●


  ● Context (goes well with Cus...
Context-sensitive Content
●   Drupal pages know very little about
    themselves.
●   Context allows relationships
    bet...
Context Rules
taxonomy             Last Night     Hallway Tracks   During Presentations




    layout options            ...
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 l...
And that was ...
Advanced Design for Drupal
              Emma Jane Hogbin
              @emmajanedotnet
       emma@desig...
Upcoming SlideShare
Loading in...5
×

Advanced Layout Techniques @ CMSExpo

4,509

Published on

Published in: Technology

Advanced Layout Techniques @ CMSExpo

  1. 1. Advanced Design for Drupal Emma Jane Hogbin @emmajanedotnet emma@designtotheme.com www.designtotheme.com
  2. 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. 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. 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. 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. 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. 7. Theme Settings (Zen NineSixty & Acquia Prosper)
  8. 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. 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. 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. 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. 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; ?>">
  13. 13. Editing Skin (Page) Settings
  14. 14. Sample Site
  15. 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. 16. Point + Click Layout with Panels
  17. 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. 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. 19. 2 Column Panel Layout
  20. 20. ...sscrolll down ....
  21. 21. One Block, Two Places, Three Cheers Same “random image” block in TWO PLACES AT ONCE!
  22. 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.
  23. 23. Panel Dashboard: ready to go
  24. 24. <insert live demo here>
  25. 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. 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.
  27. 27. Context-sensitive Content
  28. 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. 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. 30. Context-sensitive Content ● Drupal pages know very little about themselves. ● Context allows relationships between: ● page elements. ● URLs and page elements.
  31. 31. Context Rules taxonomy Last Night Hallway Tracks During Presentations layout options Cussing Clothing content displayed Final page render
  32. 32. Context Rules Last Night Hallway Tracks During Presentations Cussing Clothing
  33. 33. Panels for Layout
  34. 34. Panels with Context, part 1
  35. 35. Panels with Context, part 2
  36. 36. Side-By-Side
  37. 37. Arguments
  38. 38. Variants Summary
  39. 39. Content of Variant
  40. 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. 41. And that was ... Advanced Design for Drupal Emma Jane Hogbin @emmajanedotnet emma@designtotheme.com www.designtotheme.com Online classes starting May 11
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×