Post on 08-May-2015
Advanced Design for Drupal
Emma Jane Hogbin@emmajanedotnet
emma@designtotheme.comwww.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.
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
<insert live demo here>
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
emma@designtotheme.comwww.designtotheme.com
Online classes starting May 11