Learn how to theme any CMS in 5 minutes with Deliverance, a tool that makes theming easy. It takes content from a CMS and inserts it into placeholders in a theme destination.

1. Deliverance
Theming websites effortlessly
Nate Aune (@natea)
www.jazkarta.com
CMSExpo 2010 - Chicago

2. There are obstacles, regardless of platform

3. Example
Apply a design to a
WordPress site

6. <div id="header" role="banner">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?
>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php
bloginfo('description'); ?></div>

7. <div id="header" role="banner">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?
>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php
bloginfo('description'); ?></div>

8. HTML is forgiving
<h1><a href="<?php echo get_option('home'); ?>/"><?
php bloginfo('name'); ?></a></h1>

9. Application code is not
<h1><a href="<?php echo et_option('home'); ?>/"><?
php bloginfo('name'); ?></a></h1>

11. Are you a f ’ender
or a b’ender?

12. The current
compromise
People competent at both
People that People that have
have design skills coding skills

13. The Deliverance Way
Web Web Designers
Developers
People that know CSS

14. Secret Sauce

15. Where does Deliverance
sit in the stack?
Apache
Deliverance

16. Where does Deliverance
sit in the stack?
Apache
Deliverance

17. Deliverance is a tool for moving content into a theme
using CSS selectors and a few rules.
The only requirements is that the theme and content
source supply HTML.
A typical configuration consists of a static HTML file as
the theme resource and an application as the content
provider.

18. The rules
replace
append
prepend
drop

19. Content
#content
Theme
#page .floatRight

20. <theme href="/static/lazydays/index.html" />
<replace content="children:#content"
theme="children:#page .floatRight" />

23. #content

26. #header h1
#page
.leftColumn
#page .floatRight

27. <theme href="/static/lazydays/index.html" />
<replace content="children:#content"
theme="children:#page .floatRight" />

28. Talk is cheap

31. #content

34. #header h1
#page
.leftColumn
#page .floatRight

35. Proxy rule
<proxy path="/blog" class="blogtheme" >
<response rewrite-links="1" />
<dest href="http://blog.localhost" />
</proxy>

36. <replace
content="children:#content"
theme="children:#page
.floatRight" />

37. Let’s get to work

38. Special pages

39. Benefits
• Use any design with any CMS, without
touching either one.
• Designer and developer can work in parallel
without stepping on each others toes.
• Designer doesn’t need to know anything about
the CMS. Can use their design as is. Less
custom theme code to maintain.
• Theme multiple applications using a single
theme. Makes changes in only one place.

40. Credits
• Aaron VanDerlip for the slides
• Ian Bicking for making Deliverance
Photo credits
• http://www.flickr.com/photos/21896484@N02/2726201320
• http://www.flickr.com/photos/disownedlight/3268752278/sizes/l/

41. Find out more
• http://deliveranceproject.org/
• http://blog.jazkarta.com