ThemePort:step one - Revision history

Dirk: Added category

2009-05-20T10:58:11Z

Added category

Geiss at 20:20, 13 August 2007

2007-08-13T20:20:05Z

Geiss at 20:19, 13 August 2007

2007-08-13T20:19:34Z

Geiss at 20:16, 13 August 2007

2007-08-13T20:16:13Z

New page

== 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 [http://www.geeklog.net/filemgmt/viewcat.php?cid=8 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: [[ThemePort|Porting a Theme]]<br>
Next up:[[ThemePort:step_two|Step Two - Modifying the CSS]]

← Older revision		Revision as of 10:58, 20 May 2009
Line 19:		Line 19:
	Back to: [[ThemePort\|Porting a Theme]]<br>		Back to: [[ThemePort\|Porting a Theme]]<br>
	Next up:[[ThemePort:step_two\|Step Two - Modifying the CSS]]		Next up:[[ThemePort:step_two\|Step Two - Modifying the CSS]]
		+
		+
		+	[[Category:Themes]]

@@ Line 13: / Line 13: @@
 '''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.
+'''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.)

@@ Line 1: / Line 1: @@
 == 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.
+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'.
+'''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.
+'''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 [http://www.geeklog.net/filemgmt/viewcat.php?cid=8 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'.
+'''3.''' Grab a fresh copy of the [http://www.geeklog.net/filemgmt/viewcat.php?cid=8 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.
+'''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'.
+'''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.
+'''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.)