Advanced Layout Techniques @ CMSExpo

  • 4,349 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,349
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
118
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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; ?>">
  • 13. Editing Skin (Page) Settings
  • 14. Sample Site
  • 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
  • 20. ...sscrolll down ....
  • 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.
  • 23. Panel Dashboard: ready to go
  • 24. <insert live demo here>
  • 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.
  • 27. Context-sensitive Content
  • 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
  • 33. Panels for Layout
  • 34. Panels with Context, part 1
  • 35. Panels with Context, part 2
  • 36. Side-By-Side
  • 37. Arguments
  • 38. Variants Summary
  • 39. Content of Variant
  • 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