This tutorial is for Projectfork 2.0 and will need to be updated.
In this tutorial I will show you how create a theme for ProjectFork. I assume that you have basic skills in PHP, HTML and CSS. You can download the example theme at the end of the tutorial for further references.
STEP 1 - Creating the necessary files and folders
First, create a new folder on your desktop (or anywhere you like). In that folder, create two new files:- index.php
- my_template.xml
Note that you should replace my_template with the name of your template without white spaces. Now create two new folders in the folder you've just created:
- css
- images
- theme.css
STEP 2 - Create the HTML structure
In step 2 we want to start creating the HTML structure and place some panel positions and a section. So go back from the css folder to the main folder and open the index.php with any text editor. Copy the following code into the file (Note that the line starting with // explains the line underneath):
<?php
// Deny direct access to the file - VERY IMPORTANT!
defined( '_JEXEC' ) or die( 'Restricted access' );
// load theme header processes
$pf_core->loadProcesses('theme_header');
// add the theme stylesheet to the document header
$j_doc->addStyleSheet($com_uri.'/themes/my_theme/css/theme.css');
?>
The final line above the ?> is supposed to add the stylesheet to your theme. You may have to adjust the path to your css file there, depending on the name of your theme. The next step is to add your HTML structure and place the placeholders for the panels and the section. In this tutorial we'll create a simple horizontal layout:
<table width="100%">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
Alright, that wasn't so hard. Now we have to place a few PHP-Snippets which are going to display our panels and our section.
To create a new panel position, use the folling code:
<?php $pf_theme->loadPanels('some_position'); ?>
some_position should be replaced by a common position name like:
- theme_logo - Usually displays the project logo
- theme_quicklinks - Usually displays the quicklink buttons/workspace
- theme_pos1 - Usually displays the section navigation
- theme_pos2 - Usually displays the system messages
- theme_debug - Usually displays the debug console
- theme_footer
Only panels that are assigned to the position you use in your template will appear. So you might have to change the position of a panel in the panel configuration so that it will appear. Here is an example how you could integrate the panels into our previously created HTML structure:
<table width="100%">
<tr>
<td><?php $pf_theme->loadPanels('theme_pos1'); ?></td>
</tr>
<tr>
<td><?php $pf_theme->loadPanels('theme_pos2'); ?></td>
</tr>
<tr>
<td>
<?php $pf_theme->loadPanels('theme_footer'); ?>
<?php $pf_theme->loadPanels('theme_debug'); ?>
</td>
</tr>
</table>
The last step is to integrate the section. To do so, use this PHP code:
<?php $pf_theme->loadSection(); ?>
And put it right under the panel position theme_pos2:
<table width="100%">
<tr>
<td><?php $pf_theme->loadPanels('theme_pos1'); ?></td>
</tr>
<tr>
<td>
<?php $pf_theme->loadPanels('theme_pos2');?>
<?php $pf_theme->loadSection(); ?>
</td>
</tr>
<tr>
<td>
<?php $pf_theme->loadPanels('theme_footer'); ?>
<?php $pf_theme->loadPanels('theme_debug'); ?>
</td>
</tr>
</table>
STEP 3 - The css file
There are a lot of custom classes in ProjectFork that require css styling. I suggest that you copy the css styles from the default theme into your new theme.css file. From there you can make any changes you need. You'll find the default theme css file in:
administrator/components/com_projectfork/themes/default/css/projectfork.css
STEP 4 - The images and icons
As in the previous step you should copy the existing images from the default theme into your new images folder and make any changes you need. The default images are located in:
administrator/components/com_projectfork/themes/default/images/
STEP 5 - The xml file
We're almost done! We just have to create an xml file so our theme can be installed properly. Go to your main theme folder and open the my_theme.xml (or however you've named it). Then copy the following XML template into your xml file and edit it accordingly:
<?xml version="1.0" encoding="utf-8"?>
<install type="theme" version="2.0">
<name>my_theme</name>
<title>My Theme</title>
<author>Tobias Kuhn</author>
<email></email>
<website>http://www.projectfork.net</website>
<update_website>http://www.projectfork.net</update_website>
<version>2.0</version>
<license>GNU/LGPL</license>
<copyright>Copyright 2006-2008 Tobias Kuhn</copyright>
<date>2008/09</date>
<files>
<file>index.php</file>
<file>css/theme.css</file>
<file>images/index.html</file>
</files>
</install>
| Field name | Status | Description |
|---|---|---|
| name | Required | Enter the name of your theme. Without white spaces! Eg. "my_first_theme" |
| title | Required | Enter the title of your theme. Eg. "My first theme" |
| author | Optional | Enter your name |
| Optional | Enter your email address | |
| website | Optional | Enter your website |
| update_website | Optional | Enter a link to your website where people can quickly check for updates |
| version | Optional | Enter the the version of your theme |
| license | Optional | Enter the license under which you are publishing your work |
| copyright | Optional | Enter copyright information |
| date | Optional | Enter the release date of your work |
| files - file | Required |
Enter each file of your template separately, including all images. eg: <file>index.php</file> |
Step 6 - Creating the ZIP package
Once you're done creating your theme, go back to your theme main folder and copy them into a .zip package. Make sure that you include the folder structure. Here is an example how the content of a theme package should look like:
- /css
- /images
- /index.php
- /my_theme.xml
You should now try to install your theme on a fresh Projectfork installation and make sure all files are beeing copied correctly.
