Difference between revisions of "ThemePort:step one"

Latest revision as of 10:58, 20 May 2009

Step One: Preparation

First, we need to prepare the new theme using Geeklog's default professional theme as a starting point. This will make sure we have all the .thtml files we need so Geeklog won't give us errors unexpectedly.

1. Download the theme to your desktop, then double click it to unzip it. You will now have a folder named Refresh. Inside will be the files LICENSE.txt, index.html, and an images folder. Change the name of the folder from Refresh to Refresh_Original.

2. Click on index.html to open it in your browser, and take a few minutes to browse around the layout. Often times, the designer will leave information about the design in the layout itself. In the Refresh theme for instance, the author notifies us that the design is released under the terms of the Creative Commons license, and asks that a link to his site be included in the credits. He then goes on to show how lists, images, and other elements will be styled. Another good idea is to click on View/Page Source from Firefox's main menu. This will open another window displaying the source code for index.html. Familiarize yourself with the different sections of code, and what they refer to in the rendered layout. This will make it easier to visualize when you are copying changes into Geeklog's .thtml files.

3. Grab a fresh copy of the Geeklog install archive and extract the public_html/layout/professional directory to your desktop. Place the Refresh_Original directory inside the professional directory and then rename the folder from professional to refresh.

4. Copy all the image files from the 'Refresh_Original/images' directory and paste them in the refresh/images directory.

5. Upload via FTP this new refresh directory, and all its contents to your website's (site_root)/layout/ directory. You should now have at least 2 folders in the layout directory: professional, and refresh.

6. In your browser, login to your website and navigate to (site_root)/usersettings.php?mode=edit, click on the Layout & Language tab, and select the refresh theme and save your changes.

At this point, you now have your new theme in place and are ready to start modifications. For you only, your site should now look exactly like a default Geeklog theme install (if it was different previously). We do this so that you are free to make changes without other users readily seeing your work-in-progress. From now on, make sure to clear the browser cache each time you upload changes, so that the browser will load the newly changed content (in Firefox, hold the control key while clicking the Reload Current Page button.)

Back to: Porting a Theme
Next up:Step Two - Modifying the CSS