Advanced Layout Techniques @ CMSExpo

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[slatebackgroundstyles][title] = Background Styles skinr[slatebackgroundstyles][type] = radios skinr[slatebackgroundstyles][features][] = block skinr[slatebackgroundstyles][features][] = panels_display skinr[slatebackgroundstyles][features][] = panels_pane skinr[slatebackgroundstyles][features][] = panels_panel skinr[slatebackgroundstyles][features][] = views_view skinr[slatebackgroundstyles][options][1][label] = Dark transparent background skinr[slatebackgroundstyles][options][1][class] = dark transparentbackground

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

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

http://www.emmajane.net	257
http://www.slideshare.net	21
http://emmajane.net	17
http://selcukak.blogspot.com	3
http://translate.googleusercontent.com	2
http://static.slidesharecdn.com	1

Advanced Layout Techniques @ CMSExpo

by Emma Jane Hogbin on May 05, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 301

Statistics

Advanced Layout Techniques @ CMSExpo — Presentation Transcript