Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Advanced Layout Techniques @ CMSExpo


Published on

Published in: Technology

Advanced Layout Techniques @ CMSExpo

  1. 1. Advanced Design for Drupal Emma Jane Hogbin @emmajanedotnet
  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: ● ●
  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 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 ● DrupalConSF Video: ● Install Skinr: ● Sharing Snippets: ● DrupalConSF Video: ● Webenabled site:
  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.
  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 Online classes starting May 11