Advanced Layout Techniques @ CMSExpo

Advanced Design for Drupal

Emma Jane Hogbin@emmajanedotnet

[email protected]

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.

I wish the developer and manager would stop

fighting so thatI could just make the

effing theme already.

Applying Styles inVolatile Environments

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 + Skinrto Apply Your Stylesto Similar Elements

The following elements:● Headings● Body text● Blocks● Images

May share:● Fonts: Weight, Size, Face,

Colour● Edge styles: Borders +

Padding + Rounded Corners

● Background Colour● Element width and height

Fusion

Fusion is a theme. Themes can have display settings and groups of CSS attributes (“adjectives”).

Headings

Background colour

Font styles

Edge treatmentsLayout grid

Username formatting

Breadcrumb settings (separator)

Theme Developer Helpers

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 SettingsExtracted 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] = darktransparentbackground

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 PanelsHighly 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 OnlyUse 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:

1. Choose

a layout

2. Add stuff (blocks, nodes, views) to the layout

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

http://www.scottberkun.com/wp-content/themes/scottberkun/images/40-1 . jpg

M:M: Ah. I'd like to have an argument, please.Ah. I'd like to have an argument, please.R:R: Certainly sir. Have you been here before?Certainly sir. Have you been here before?M:M: No, I haven't, this is my first time.No, I haven't, this is my first time.

“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

Hallway Tracks During PresentationsLast Night

Cussing Clothing

taxonomy

layout options

content displayed

Final page render

Context Rules

Hallway Tracks During PresentationsLast Night

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

[email protected]

Online classes starting May 11

Advanced Layout Techniques @ CMSExpo

Technology

Transcript of Advanced Layout Techniques @ CMSExpo