Pimp your Poole site with a free CSS template

Posted on November 22, 2009

Updated on March 2, 2010 to work with the latest Poole version.

There are thousands of smooth free CSS templates scattered throughout the web. This tutorial explains how to apply one of them to a Poole site.

Example template

Let's start with a preview. The left image shows the default Poole style. The right image shows how a Poole site looks like at the end of this example.

Init a Poole project

In this tutorial we start from a fresh Poole project:

$ poole --init /path/to/project
$ cd /path/to/project

Get the CSS template

Next we need a CSS template. Here we use one from opendesigns.org. The template Silence and Harmony seems to be a .. well .. corny one. Download and extract it into a temporary location:

$ wget http://www.opendesigns.org/designs/?id=183
$ unzip template-183.zip

Apply the template to the Poole site

Copy the style files from the downloaded and extracted template into the project's input folder:

$ cp -r silence_harmony/images input/
$ cp -r silence_harmony/silence_harmony_screenshot.jpg input/
$ cp -r silence_harmony/style.css input/

Next the file silence_harmony/index.html is going to be the new page.html file for our Poole project:

$ cp silence_harmony/index.html page.html

Now comes the tricky part, make the new page.html file work with Poole. For that task, open page.html in your favorite editor.

Search for the menu code, looking like this:

<div id="menu">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>

Change it to

<div id="menu">
<ul id="navlist">
<!--%
    mpages = [p for p in pages if "menu-position" in p]
    mpages.sort(key=lambda p: int(p["menu-position"]))
    entry = '<li%s><a%s href="%s">%s</a></li>'
    for p in mpages:
        li_id = p["title"] == page["title"] and " id=active" or ""
        a_id = p["title"] == page["title"] and " id=current" or ""
        print(entry % (li_id, a_id, p["url"], p["title"]))
%-->
</ul>
</div>

This is embedded Python code which generates a navigation menu list.

Next we need to add the __content__ macro to page.html. Search for the content area, something like this:

<div id="main_content">
  <h2>About this template </h2>
  ...
  <div id="footer">...</div>
</div>

Change it to

<div id="main_content">
  {{ __content__ }}
  <div id="footer">...</div>
</div>

The final adjustment is to set the __encoding__ macro. Replace

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

at the top of page.html by

<meta http-equiv="content-type" content="text/html; charset={{ __encoding__ }}" />

Enjoy the result

You can now built and serve your site project

$ poole --build
$ poole --serve

and enjoy it at http://localhost:8080/.

Using other templates

Using other templates works quite similar. The concrete steps may vary depending on the template's media files and structure of the example index.html file.

To adopt the process to other templates, here's a higher level summary of what has been done in the example above:

Download and extract the CSS template
Copy the template's media files into the project's input folder
Use the template's index.html as the new project's page.html file.
Adjust the new page.html file to work with Poole:
1. Remove the template's example menu and replace it by the menu generation code (probably you have to adjust the HTML tags and CSS classes used by the generator code).
2. Remove the template's example content and replace it by Poole's __content__ macro.
3. Adjust the HTML encoding line to use Poole's __encoding__ macro.

Where to find CSS templates

Everywhere. However, these site are good starting points for your search: