Journal

29 October 2006

Building a Symphony Theme: Part 2

As we discovered in Part 1 of this series, a valid XSLT template and stylesheet must be available to transform XML data into HTML Output. (Note that I will be using the latest update, Symphony 1.5.06, for this tutorial.) At this point, though, we have no data to transform. Next, we need to create an XML Data Source. But, before we get there, let’s discover what is possible in Symphony even without a Data Source. The power of Symphony comes in the ability to build HTML pages by assembling pieces of reusable HTML code and XSLT templates into modular page structures through Masters, Pages and Utilities.

Masters, Pages and Utilities

In Symphony, there are three methods available to reuse HTML code and templates: Masters, Pages and Utilities. Master templates are generally used as containers for structural elements of your site which will be used across several pages. Pages contain the main content for each page. Utilities contain the various blocks of content, lists or menus that are used to make up a page.

Masters, Pages and Templates

Masters

If the site has one basic template, it is likely that you may need a single Master template that contains a header and a footer that will be used throughout the site.

Pages

The content will change from one page to another, so the templates for the content structure for each page will be contained in Page templates.

Utilities

Utilities are reusable templates that can be applied within a Master template, a Page template, or even within another Utility, as shown in the diagram above. For example, a Utility could dynamically generate the main navigation, or a section menu, or a sideblog, or a list of categories, or a list of archive months, or a list of recent entries, or a format for entries and comments. Probably one of the most useful Utilities will be used to generate different formats for displaying dates and times.

Creating the Page Structure

Getting back to the task at hand, building the -Pink for October- qwilm Theme in Symphony, the first step will be to create the page structure using Masters, Pages and Utilities. We’ll use the diagram above as a model for building our templates.

Start with the basic XHTML page structure, and I do mean XHTML. The page structure has to be valid or XSLT will reject it. XSLT cannot transform XML that is not well-formed and that refers not only to the XML data, but also the XHTML structure. Every element needs to be properly closed, whether it is a self-closing element or an element with opening and closing tags.

-Since we have permission from Derek Punsalan to use the Pink for October Theme he created for WordPress, we can grab his HTML source code and download the CSS and image files that control the structure and presentation of the pages.- (Always be sure that you have permission before duplicating the design of an existing site so that you stay well within the law and within the limits of ethical behaviour in regard to the intellectual property rights of others.)

Plan B: qwilm!

On closer inspection, I discovered that Derek Punsalan is limiting distribution of the theme to downloads only from his own site, which means I will not be able to continue porting this theme. Time to go to Plan B.

There have been requests in the forum for the Fresh Theme from Bartelme Design or the qwilm! Theme by Lokesh Dhakar of HuddleTogether. I think I will opt for the latter, unless someone has strong objections otherwise.

James Steel (lostbear) has kindly posted to the Overture Forum a ZIP package containing the stripped-down HTML file and the CSS and image files that we can use as a starting point. Thank you, James.

I have recreated the HTML code to include examples of the items that we will need to code in Symphony. I also offer the the CSS, HTML and image files for download from this link. Here is the raw HTML code that I will be working with:

                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lokesh Dhakar | qwilm Theme </title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Symphony 1.5.06" />
<meta name="copyright" content="Copyright Lokesh Dhakar" />
<style type="text/css" media="screen">
@import url( /workspace/css/style.css );
</style>
</head>
<body>
<div id="quick-nav">
<a href="/"><img src="/workspace/css/images/home_icon.gif" alt="goto homepage" width="16" height="14" /></a>
<a href="mailto:name@example.com"><img src="/workspace/css/images/email_icon.gif" alt="mail me!" /></a>
<a href="/feed/"><img src="/workspace/css/images/rss_icon.gif" alt="grab RSS 2.0 feed" width="16" height="16" /></a>
</div>
<div id="header">
<h1><a href="/">Lokesh Dhakar | qwilm Theme </a></h1>
</div>
<div id="wrapper">
<div id="content" class="box">
<div class="post">
<h2 class="posttitle" id="post-67">
<a href="#" rel="bookmark" title="Permanent link">Finding some time for a Symphony Theme</a>
</h2>
<p class="postmeta">December 8, 2006 | 4:07 am</p>
<div class="postentry">
<p>Will it ever happen?</p>
<p>I've been waiting forever for a new theme to try out.</p>
</div>
<p class="postfeedback">
<a href="#" class="commentslink" title="Add your comments">Comments</a>
</p>
</div>
<div class="post">
<h2 class="posttitle" id="post-65"><a href="/2006/09/26/long-time-no-updates/" rel="bookmark" title="Permanent link to Long time, no updates.">Long time, no updates.</a></h2>
<p class="postmeta">September 26, 2006 | 7:04 pm</p>
<div class="postentry">
<p>I've been busy busy, but things are starting to settle down a wee bit. 
Expect updates, new things, email replies, and more.
</p>
</div>
<p class="postfeedback">
<a href="#" class="commentslink" title="Add your comments">Comments (20)</a>
</p>
</div>
<div class="post">
<h2 class="posttitle" id="post-63">
<a href="#" rel="bookmark" title="Permanent link to New job and Adobe Flex">Quiet and happening</a>
</h2>
<p class="postmeta">June 11, 2006 | 3:44 pm</p>
<div class="postentry">
<p>Things have been quiet on the blog front but lots has been happening on other fronts. 
I can catch you up in about three paragraphs. Here goes.
</p>
</div>
<p class="postfeedback">
<a href="#" class="commentslink" title="Add your comments">Comments (22)</a>
</p>
</div>
<h2 id="comments">20 Comments</h2>
<p><a href="#postcomment" class="commentslink" title="Jump to the comments form">Jump to Comment Form</a></p>
<ol id="commentlist">
<li class="alt" id="comment-10358">
<h3 class="commenttitle"><a href="#comment-10358" title="Permanent link to this comment">#1</a> bauhouse</h3>
<p class="commentmeta">December 9, 2006 @ 7:49 pm</p>
<p>What a lovely site design, Lokesh. Do you mind if I use it for a Symphony theme?</p>
</li>
<li class="alt" id="comment-10358">
<h3 class="commenttitle"><a href="#comment-10358" title="Permanent link to this comment">#2</a> Stephen</h3>
<p class="commentmeta">November 6, 2006 @ 8:30 am</p>
<p>@Lokesh, you've really done a great job with this simple design.</p>
</li>
<li class="alt" id="comment-10358">
<h3 class="commenttitle"><a href="#comment-10358" title="Permanent link to this comment">#3</a> Bau</h3>
<p class="commentmeta">September 26, 2006 @ 6:32 pm</p>
<p>I think this would be perfect as a Symphony theme. That would be awesome.</p>
</li>
</ol>
<h2 id="postcomment">Leave a Comment</h2>
<form action="http://www.huddletogether.com/wp-comments-post.php" method="post" id="commentform">
<p>
<input type="text" name="author" id="author" value="" size="30" tabindex="1" />
<label for="author">Name </label>
</p>
<p>
<input type="text" name="email" id="email" value="" size="30" tabindex="2" />
<label for="email">E-mail </label>
</p>
<p>
<textarea name="comment" id="comment" cols="70" rows="10" tabindex="4"></textarea>
</p>
<p>
<input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="67" />
</p>
</form>
</div>
<div class="box sidebar" id="sidebar-1">
<ul>
<li>
<h2>Archives</h2>
<ul>
<li><a href='/archives/2006/12/' title='December 2006'>December 2006</a></li>
<li><a href='/archives/2006/09/' title='September 2006'>September 2006</a></li>
<li><a href='/archives/2006/06/' title='June 2006'>June 2006</a></li>
<li><a href='/archives/2006/05/' title='May 2006'>May 2006</a></li>
<li><a href='/archives/2006/04/' title='April 2006'>April 2006</a></li>
<li><a href='/archives/2006/03/' title='March 2006'>March 2006</a></li>
<li><a href='/archives/2006/02/' title='February 2006'>February 2006</a></li>
<li><a href='/archives/2006/01/' title='January 2006'>January 2006</a></li>
</ul>
</li>
<li>
<h2>Recent Posts</h2>
<ul>
<li><a href='/archives/2006/12/08/finding-some-time/' title='Messageboard registration'>Finding some time</a></li>
<li><a href='/archives/2006/09/26/long-time-no-updates/' title='Long time, no updates.'>Long time, no updates.</a></li>
<li><a href='/archives/2006/06/11/quiet-and-happening/' title='New job and Adobe Flex'>Quiet and happening</a></li>
</ul>
</li>
<li>
<h2>Projects</h2>
<ul>
<li><a href="http://www.huddletogether.com/projects/lightbox/">Lightbox JS</a></li>
<li><a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox JS v2.0</a></li>
<li><a href="http://themes.wordpress.net/columns/3-columns/61/qwilm-03/">Wordpress Theme</a></li>
</ul>
</li>
<li>
<h2>Photos</h2>
<ul id="photo-galleries">
<li><a href="/gallery/europe/">My Trip to Europe</a></li>
<li><a href="/gallery/roadtrip/">My Roadtrip</a></li>
</ul>
</li>
<li>
<h2>Categories</h2>
<ul>
<li><a href="/category/general/" title="View all posts filed under General">General</a></li>
<li><a href="/category/technology/" title="View all posts filed under Technology">Technology</a></li>
<li><a href="/category/personal/" title="View all posts filed under Personal">Personal</a></li>
<li><a href="/category/work/" title="View all posts filed under Work">Work</a></li>
</ul>       
</li>
<li>
<h2>Search</h2>
<div id="search-wrapper">
<form method="get" id="searchform" action="#">
<div>
<input type="text" value="" name="" id="" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
</div>
</li>
</ul>
</div>
<div class="box sidebar" id="sidebar-2">
<ul>
<li>
<h2>About</h2>
<p>My name is Stephen Bau. I'm 38 and I live in Abbotsford, BC where I work as a graphic designer.</p>
<p>This is just a <a href="http://21degrees.com.au/products/symphony/" 
title="The Symphony Web Publishing System from Twentyone Degrees">Symphony</a> 
blog theme based on the WordPress theme created by Lokesh Dhakar of 
<a href="http://www.huddletogether.com/">Huddle Together</a>.</p>
</li>
<li>
<h2>Contact</h2>
<p><a href="/contact/" title="Contact Form">Send me an email</a></p>
</li>
<li>
<h2>Meta</h2>
<ul>
<li><a href="/feed/" title="Syndicate this site using RSS 2.0">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li>
<li><a href="/comments/feed/" title="The latest comments to all posts in RSS">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li>
<li><a href="http://21degrees.com.au/products/symphony/" 
title="The Symphony Web Publishing System from Twentyone Degrees">Symphony</a></li>
</ul>
</li>
</ul>
</div>
<div class="box sidebar" id="sidebar-3">
<h3><a href="/" title="Home">qwilm</a></h3>
</div>
</div>
</body>
</html>

                

Now, it’s time to see what Symphony can do. Let’s start with the default parameters and data sources in Building a Symphony Theme: Part 3.