Panels for Themers

Presented by
David Needham

http://is.gd/panelsforthemers

Wait a minute...


aren't you that one guy?

...from that one company in San Francisco?

...and why Minneapolis in February?!

Wait a minute...


what is a themer?

Wireframes...

html, css, php, jQuery...

Theming
Magic!

Why do I love panels?

Why do I love panels?


1. Custom layouts

Why do I love panels?


2. Node templates (with variants)

Why do I love panels?


3. Custom styles (per pane)

Why do I love panels?


4. Custom styles (per region)

Panels' layout builder


(don't use it)

Custom layouts


(in code)

Where is the code?


panels/plugins/layouts

Where do I put it?


1. mytheme/plugins/layouts

Where do I put it?


2. The .info file

Where do I put it?


2. The .info file

Make it your own


3. Rename functions, folders & files

Make it your own


3. Rename functions, folders & files

Anatomy of layouts

Anatomy of layouts


the .inc file

The .inc file

The .inc file

Anatomy of layouts


the .tpl.php file

The .tpl.php file


(tipple fip)

Anatomy of layouts


the .css file

The .css file

Anatomy of layouts


the .png file

The .png file

Anatomy of layouts


the .txt file

Theming the next level


1. Flexible layouts

Theming the next level


1. Flexible layouts

Theming the next level


1. Flexible layouts

Theming the next level


2. Responsive layouts

Theming the next level


2. Responsive layouts (cheat!)

Theming the next level


2. Responsive layouts (cheat!)

Thank you!



http://is.gd/panelsforthemers

Drupalcon Portland:
http://is.gd/themingforsitebuilders

Go comment on:
http://portland2013.drupal.org/node/838
http://portland2013.drupal.org/node/833

David Needham     @davidneedham

Fork me on GitHub