Difference between revisions of "ThemePort"
m (Added category) |
|||
| (4 intermediate revisions by one other user not shown) | |||
| Line 2: | Line 2: | ||
| − | Sometimes, it is easier to | + | 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. | 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 | + | [[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. | ::* It already has a familiar left column & story column structure similar to that of Geeklog. | ||
| Line 23: | 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. | 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 | + | 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: | We will break up the tutorial over the following pages: | ||
| Line 35: | Line 33: | ||
What are we waiting for? Let's get started! :-D | What are we waiting for? Let's get started! :-D | ||
| + | |||
| + | |||
| + | [[Category:Themes]] | ||
Latest revision as of 10:57, 20 May 2009
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.
- 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:
What are we waiting for? Let's get started! :-D
