ThemePort

Porting a Theme

Sometimes, it is easier to not re-invent the wheel. There are many free open-source website templates available that you can quickly adapt to Geeklog. Here are a couple of places to start looking:

• Open Source Web Design - http://www.oswd.org/
• Open Web Design - http://www.openwebdesign.org/
• Liquid Designs - http://www.cssliquid.com/
• StyleShout - http://www.styleshout.com/

Most of the themes found at the sites above are released under the [public license], or one of its variants. In a nutshell, it means you are free to use, modify, and re-distribute the code, provided the GNU license is passed along unchanged, with whatever code changes you make. Many times, a theme author will only ask that you leave a link in the site footer, crediting them with the design.

Having said the above, remember that imitation is the sincerest form of flattery. If you find a site design that you like that is //not// open-source, contact the site admin or author and ask for permission to port their design to Geeklog. Most will gladly grant you permission, and some might even offer some pointers or insights on their designs.

Below is a tutorial on porting a pure XHTML/CSS based web design to Geeklog. I have chosen a 2 column, fixed width theme called "Refresh" found at www.openwebdesign.org to be our example. The reasons behind this decision are:

• It already has a familiar left column & story column structure similar to that of Geeklog.
• It is a "neutral" template, which means that it can be used on a wide variety of websites.
• It is clean and minimalist, which makes it both user and designer friendly.

At times, site administrators or theme designers fall into the trap of designing a theme solely for one site or purpose. A wise designer will create with multiple uses in mind. This not only allows you to re-use bits of code across multiple designs, but also allows others to easily re-purpose your design to meet their needs. In many cases, making just a few color changes in the //style.css// file, and an image replacement, will be all that is needed. As you port other themes, keep these principles in mind.

For purposes of this tutorial, we will assume you are using Windows XP with Firefox 2 as your web browser, and are running Geeklog v1.4.1. Also grab a free copy of Notepad++, which is the code editor we will use to make our changes. You can also download a copy of the finished Refresh theme here.

We will break up the tutorial over the following pages:

• Step One - Preparation
• Step Two - Modifying the CSS
• Step Three - Modifying the Header
• Step Four - Modifying the Body
• Step Five - Modifying the Footer
• Step Six - Cleaning Up

What are we waiting for? Let's get started! :-D