Advanced Design for Drupal
Emma Jane Hogbin
● Why advanced layout modules.
● Fusion and Skinr--a CSS selector
● Panels for layout.
● Context-sensitive content with
● Moving forward: Making the right
decision for your site.
Applying Styles in
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
● Re-using your Skinr styles on all projects will ensure no
(common) element gets left behind.
● Alternate ways of solving the style guide problem:
Use Theme Settings + Skinr
to Apply Your Styles
to Similar Elements
The following May share:
elements: ● Fonts: Weight, Size, Face,
● Edge styles: Borders +
● Body text Padding + Rounded
● Blocks Corners
● Background Colour
● Element width and height
Fusion is a theme. Themes can have
display settings and groups of CSS
Breadcrumb settings (separator)
Theme Developer Helpers
(Zen NineSixty & Acquia Prosper)
● Fusion settings
alter HTML and
● Blocks are placed
into pink regions.
● Individual blocks
may be “skinned”
to alter their
Applying Settings with Skinr
● Skinr is a module. Modules can perform tasks
● 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
2.Add Skinr hooks in the info file.
3.Include the variable $skinr in theme
4.In the UI, apply skins to applicable
Getting Started with Skinr and Fusion
● DrupalConSF Video: http://tinyurl.com/theming-skinr
● Install Skinr: http://tinyurl.com/install-skinr-2x
● Sharing Snippets: http://fusiondrupalthemes.com/snippets
● 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
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:
● 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:
l ay ut
a e layo
se ) to th
ho s , vie
.C ks, node
1 ( bloc
Panels Demo Summary
If all went well this is what happened:
● Sub-divide $content into multiple
● Add node, blocks, views to the panel
● Assign a custom URL for the panel
● Promote the panel to the front page.
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.
● Three contrib modules tackle this problem
● Context (goes well with CustomPage)
● Display Suite
● Efforts are being made to incorporate
“context” into core for D8. Yes, eight.
● Drupal pages know very little about
● Context allows relationships
● page elements.
● URLs and page elements.
taxonomy Last Night Hallway Tracks During Presentations
layout options Cussing Clothing
Final page render
Last Night Hallway Tracks During Presentations
Panels for Layout
Panels with Context, part 1
Panels with Context, part 2
Content of Variant
● Use appropriate tools to mitigate
● 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
And that was ...
Advanced Design for Drupal
Emma Jane Hogbin
Online classes starting May 11