Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Deliverance
Theming websites effortlessly
Nate Aune (@natea)
www.jazkarta.com
CMSExpo 2010 - Chicago
There are obstacles, regardless of platform
Example
Apply a design to a
 WordPress site
<div id="header" role="banner">

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

 <div id="headerimg">
   <h1><a href="<?php echo get_option('home'); ?
>/"><?php bloginfo...
HTML is forgiving
<h1><a href="<?php echo get_option('home'); ?>/"><?
php bloginfo('name'); ?></a></h1>
Application code is not
<h1><a href="<?php echo et_option('home'); ?>/"><?
php bloginfo('name'); ?></a></h1>
Are you a f ’ender
  or a b’ender?
The current
  compromise
     People competent at both




People that          People that have
have design skills       ...
The Deliverance Way


  Web             Web Designers
  Developers



           People that know CSS
Secret Sauce
Where does Deliverance
   sit in the stack?


          Apache



       Deliverance
Where does Deliverance
   sit in the stack?


          Apache



       Deliverance
Deliverance is a tool for moving content into a theme
using CSS selectors and a few rules.

The only requirements is that ...
The rules
replace
append
prepend
drop
Content
#content




     Theme
 #page .floatRight
<theme href="/static/lazydays/index.html" />


<replace content="children:#content"
         theme="children:#page .floatR...
#content
#header h1




    #page
.leftColumn
                  #page .floatRight
<theme href="/static/lazydays/index.html" />


<replace content="children:#content"
         theme="children:#page .floatR...
Talk is cheap
#content
#header h1




    #page
.leftColumn
                     #page .floatRight
Proxy rule
<proxy path="/blog" class="blogtheme" >
  <response rewrite-links="1" />
<dest href="http://blog.localhost" />
...
<replace
content="children:#content"
theme="children:#page
.floatRight" />
Let’s get to work
Special pages
Benefits
• Use any design with any CMS, without
  touching either one.
• Designer and developer can work in parallel
  with...
Credits
•   Aaron VanDerlip for the slides

•   Ian Bicking for making Deliverance


                Photo credits
•   htt...
Find out more
• http://deliveranceproject.org/
• http://blog.jazkarta.com
Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)
Theming websites effortlessly with Deliverance (CMSExpo 2010)
Upcoming SlideShare
Loading in …5
×

Theming websites effortlessly with Deliverance (CMSExpo 2010)

2,627 views

Published on

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.

Published in: Technology
  • Be the first to comment

Theming websites effortlessly with Deliverance (CMSExpo 2010)

  1. 1. Deliverance Theming websites effortlessly Nate Aune (@natea) www.jazkarta.com CMSExpo 2010 - Chicago
  2. 2. There are obstacles, regardless of platform
  3. 3. Example Apply a design to a WordPress site
  4. 4. <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>
  5. 5. <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>
  6. 6. HTML is forgiving <h1><a href="<?php echo get_option('home'); ?>/"><? php bloginfo('name'); ?></a></h1>
  7. 7. Application code is not <h1><a href="<?php echo et_option('home'); ?>/"><? php bloginfo('name'); ?></a></h1>
  8. 8. Are you a f ’ender or a b’ender?
  9. 9. The current compromise People competent at both People that People that have have design skills coding skills
  10. 10. The Deliverance Way Web Web Designers Developers People that know CSS
  11. 11. Secret Sauce
  12. 12. Where does Deliverance sit in the stack? Apache Deliverance
  13. 13. Where does Deliverance sit in the stack? Apache Deliverance
  14. 14. 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.
  15. 15. The rules replace append prepend drop
  16. 16. Content #content Theme #page .floatRight
  17. 17. <theme href="/static/lazydays/index.html" /> <replace content="children:#content" theme="children:#page .floatRight" />
  18. 18. #content
  19. 19. #header h1 #page .leftColumn #page .floatRight
  20. 20. <theme href="/static/lazydays/index.html" /> <replace content="children:#content" theme="children:#page .floatRight" />
  21. 21. Talk is cheap
  22. 22. #content
  23. 23. #header h1 #page .leftColumn #page .floatRight
  24. 24. Proxy rule <proxy path="/blog" class="blogtheme" > <response rewrite-links="1" /> <dest href="http://blog.localhost" /> </proxy>
  25. 25. <replace content="children:#content" theme="children:#page .floatRight" />
  26. 26. Let’s get to work
  27. 27. Special pages
  28. 28. 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.
  29. 29. 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/
  30. 30. Find out more • http://deliveranceproject.org/ • http://blog.jazkarta.com

×