ThemePort - Revision history

Dirk: Added category

2009-05-20T10:57:51Z

Added category

Geiss at 20:12, 13 August 2007

2007-08-13T20:12:23Z

Geiss at 20:11, 13 August 2007

2007-08-13T20:11:39Z

Geiss at 19:55, 13 August 2007

2007-08-13T19:55:40Z

Geiss at 19:37, 13 August 2007

2007-08-13T19:37:04Z

Geiss at 19:35, 13 August 2007

2007-08-13T19:35:24Z

New page

== 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 [[http://www.fsf.org/licensing/licenses/gpl.html|GNU 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 [[http://www.openwebdesign.org/viewdesign.phtml?id=3497&referer=%2Fmost_popular.phtml|www.openwebdesign.org]] to be our example. The reasons behind this decision are:

[[Image:refresh.png|thumb|right]]

::* 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 [[http://www.mozilla.com/en-US/firefox/|Firefox 2]] as your web browser, and are running Geeklog v1.4.1. Also grab a free copy of [[http://notepad-plus.sourceforge.net/uk/site.htm|Notepad++]], which is the code editor we will use to make our changes. You can also download a copy of the finished Refresh theme [[http://www.gllabs.org/filemgmt/index.php?id=141|here]].

We will break up the tutorial over the following pages:

:* [[ThemePort:step_one|Step One - Preparation]]
:* [[ThemePort:step_two|Step Two - Modifying the CSS]]
:* [[ThemePort:step_three|Step Three - Modifying the Header]]
:* [[ThemePort:step_four|Step Four - Modifying the Body]]
:* [[ThemePort:step_five|Step Five - Modifying the Footer]]
:* [[ThemePort:step_six|Step Six - Cleaning Up]]

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

← Older revision		Revision as of 10:57, 20 May 2009
Line 33:		Line 33:

	What are we waiting for? Let's get started! :-D		What are we waiting for? Let's get started! :-D
		+
		+
		+	[[Category:Themes]]

← Older revision		Revision as of 20:12, 13 August 2007
Line 2:		Line 2:


−	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:	+	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 Source Web Design - http://www.oswd.org/

← Older revision		Revision as of 20:11, 13 August 2007
Line 2:		Line 2:


−	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:	+	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 Source Web Design - http://www.oswd.org/

@@ Line 13: / Line 13: @@
 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.
-[[Image:refresh.png|right]]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 [[http://www.openwebdesign.org/viewdesign.phtml?id=3497&referer=%2Fmost_popular.phtml|www.openwebdesign.org]] to be our example. The reasons behind this decision are:
+[[Image:refresh.png|right]]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 [http://www.openwebdesign.org/viewdesign.phtml?id=3497&referer=%2Fmost_popular.phtml 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.
@@ Line 21: / Line 21: @@
 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 [[http://www.mozilla.com/en-US/firefox/|Firefox 2]] as your web browser, and are running Geeklog v1.4.1. Also grab a free copy of [[http://notepad-plus.sourceforge.net/uk/site.htm|Notepad++]], which is the code editor we will use to make our changes. You can also download a copy of the finished Refresh theme [[http://www.gllabs.org/filemgmt/index.php?id=141|here]].
+For purposes of this tutorial, we will assume you are using Windows XP with [http://www.mozilla.com/en-US/firefox/ Firefox 2] as your web browser, and are running Geeklog v1.4.1. Also grab a free copy of [http://notepad-plus.sourceforge.net/uk/site.htm Notepad++], which is the code editor we will use to make our changes. You can also download a copy of the finished Refresh theme [http://www.gllabs.org/filemgmt/index.php?id=141 here].
 We will break up the tutorial over the following pages: