Geeklog Documentation

Creating a Theme for Geeklog

Creating a theme for Geeklog is easy and quite fast. If you can manipulate HTML files then you can create a theme! There's no need to learn PHP.

Creating a theme

First, copy an existing theme that is most similar to what you want to implement (if one exists). If what you will do is radically different (and we hope so!) then copying any one will do. Copy the existing theme to the name you want your theme to have (please, no spaces in the theme name):

cp -R /path/to/geeklog/public_html/layout/Yahoo /path/to/geeklog/public_html/layout/My_Theme_Name_No_Spaces

Change into your new theme directory:

cd /path/to/geeklog/public_html/layout/My_Theme_Name_No_Spaces

Now edit the templates to suit your needs. Keep in mind that templates, generally are partial HTML files. The directory you just created holds ALL templates Geeklog needs but you will only need to modify a small few to make a huge impact on the look.

In particular these are the templates you will undoubtedly want to change:

How themes work

When rendering a theme, Geeklog starts with header.thtml which builds the site's header and then goes on to include the left column of blocks (look for the variable {left_blocks} and the leftblocks.thtml file). The middle part of a site consists of the stories which are built using the storytext.thtml and storybodytext.thtml (for normal stories) and featuredstorytext.thtml and featuredstorybodytext.thtml (for featured stories) template files. The footer.thtml file then builds the right column of blocks (variable {right_blocks}, file right_blocks.thtml) and the site's footer. Blocks themselves consist of the blockheader.thtml and blockfooter.thtml files.

The above only describes how Geeklog's main page and stories are rendered. More templates exist for the various editors and lists you will see in Geeklog, as well as for the calendar and almost every other part of Geeklog.

There is currently no complete list available that explains which template file is used for which part of Geeklog. However, in most cases the use should be obvious when you have a look at the file and directory names in your theme's layout directory. If you're unsure which template file is used to render a certain part of Geeklog, have a look at the URL. You will notice the name of a PHP file there, e.g. the users.php file when you view a user's profile. Open that file and search for '.thtml'. For the profile you will find these lines (in function userprofile()):

$user_templates = new Template ($_CONF['path_layout'] . 'users');
$user_templates->set_file (array ('profile'=>'profile.thtml', 'row'=>'commentrow.thtml', 'strow'=>'storyrow.thtml'));

You don't need to understand PHP code to see that this uses the template files profile.thtml, commentrow.thtml, and storyrow.thtml. The first line also indicates that these are taken from the users directory within the theme's layout directory.

An incomplete list of variables that can be used in templates files is also included.

Testing a theme and further information

After you have edited your themes, you are now ready to test it out. Simply go to http://mygeeklogsite/usersettings.php?mode=preferences - in the theme drop-down select your newly created theme (note the name of your theme is the same name as the directory for your theme).

Finally, you may want to update the logo and other images in your theme's images directory.

For the template system we are using PHPLib's template class (http://phplib.sourceforge.net/). Read their documentation and, optionally, look at /path/to/geeklog/system/classes/template.class.php to see how it is implemented. Even with this knowledge it may not be clear which templates are used in conjunction with one another (i.e. storybody.thtml and storybodytext.thtml together make up the complete format of a single story). If you have questions join our mailing list at http://lists.geeklog.net/listinfo/geeklog-users or check us out in IRC at irc.freenode.net in #geeklog.

Tips and tricks

Themes and WYSIWYG editors: The template files used by Geeklog are not complete HTML files - they contain only parts of the HTML that Geeklog puts together to build a proper HTML document. This, however, seems to confuse some WYSIWYG HTML editors and some of them tend to add the HTML which they think is missing from the file, thus making it unusable for Geeklog.
We suggest you use a simple text editor to edit your themes.

PHP in themes: You can use PHP in the header of a theme, i.e. in the header.thtml file. If you want to use custom PHP functions, you can put them in the file functions.php within your themes directory.

Different look for left and right blocks: You can give the blocks on the left and right a different look. See this story on the Geeklog homepage for details.

Polls: To use multi-colored bars in the graphical display of poll results, you can use the {answer_counter} and {answer_odd} variables in the pollbooth/pollvotes_bar.thtml template file. {answer_counter} will be replaced with a running number for each answer, hence bar{answer_counter}.gif would result in bar1.gif, bar2.gif, etc. Giving each of those GIFs a different color would give you a different color for each answer.
{answer_odd} will alternate between 0 and 1 for every answer, hence bar{answer_odd}.gif will result in bar0.gif for the first, third, fifth, etc. answer and bar1.gif for the second, fourth, etc. answer.

Left blocks in the right column: $_CONF['left_blocks_in_footer'] (in config.php) is a rather curious option. It makes the {left_blocks} variable available in the site's footer (i.e. footer.thtml) while at the same time disabling it in the header (header.thtml).
The idea is that this can be used for two-column layouts (one column for the blocks and one column for the content) but when you want to have the blocks on the right side. Simply moving all blocks to the right will not work as expected, as you'd end up with no blocks at all on those pages that normally only display the left blocks (e.g. article.php or the admin pages). Setting $_CONF['left_blocks_in_footer'] = 1 will fix this, so that the blocks, while internally still treated as left blocks, will actually be displayed on the right.
The theme's header.thtml, footer.thtml, and leftblocks.thtml will probably need some adjustments. It is also recommended to leave the $_CONF variable unchanged in config.php and overwrite it in the theme's functions.php instead. That way, you can even leave your users a choice between, for example, a "normal" theme and one with the blocks on the right.

Theme changes in Geeklog 1.3.11

There are no mandatory theme changes in Geeklog 1.3.11, so themes made for Geeklog 1.3.10 will work just fine without any modifications.

A few minor additions / new options have been introduced:

Theme changes in Geeklog 1.3.10

General note: To upgrade your custom theme for use with Geeklog 1.3.10, you can simply copy over any new template files from the Geeklog default theme.

The biggest change in Geeklog 1.3.10 is that we now ship it with only one default theme (the Professional theme, kindly provided by Victor B. Gonzalez) and that the previously included themes are now available as a separate download.

Admin templates

Most themes don't change the template files in the theme's admin directory, so you can often save yourself a bit of work by simply replacing the entire admin directory with the one from the Geeklog 1.3.10 distribution.

Other templates

Optional changes

The following is a list of optional changes (mostly new variables that are now available). This information is mostly of interest for those who want to develop their own themes.

Theme changes in Geeklog 1.3.9

Theme changes in Geeklog 1.3.8

Theme changes in Geeklog 1.3.8 were mostly aimed at moving as much of the hard-coded HTML into template files as possible. Other changes were made to give theme authors better control over the layout and a small portion of changes were done to incorporate new Geeklog features.

New template files

This is a list of the new files. You can safely copy these over from one of the standard themes that ship with Geeklog (most of these files contain HTML that was previously hard-coded into Geeklog).

adminoption_off.thtml
loginform.thtml
topicoption.thtml
topicoption_off.thtml
useroption_off.thtml
admin/database/listbackups.thtml
admin/database/listitem.thtml
admin/user/edituser.thtml
admin/user/plainlist.thtml
comment/commentbar.thtml
comment/startcomment.thtml
pollbooth/pollanswer.thtml
pollbooth/pollblock.thtml
pollbooth/pollcomments.thtml
pollbooth/pollresult.thtml
pollbooth/pollvotes_bar.thtml
pollbooth/pollvotes_num.thtml
preferences/boxesblock.thtml
preferences/commentblock.thtml
preferences/deleteaccount.thtml
preferences/digestblock.thtml
preferences/displayblock.thtml
preferences/displayprefs.thtml
preferences/excludeblock.thtml
preferences/language.thtml
preferences/privacyblock.thtml
preferences/profile.thtml
preferences/theme.thtml
preferences/username.thtml
preferences/userphoto.thtml
search/resultauthdatehits.thtml
search/resultrowenhanced.thtml
search/resultsummary.thtml
search/resulttitle.thtml
users/newpassword.thtml

Note: preferences and admin/database are new directores.

Changed / updated template files

These files have changed since Geeklog 1.3.7, i.e. they may contain new variables, table columns, etc. If you haven't changed these files in your existing theme, it is probably best to simply copy them over from one of the themes that ship with Geeklog (with the exception of style.css and header.thtml, see below).

style.css (see below)
header.thtml (see below)
admin/block/blockeditor.thtml
admin/block/listblocks.thtml
admin/block/listitem.thtml
admin/event/eventeditor.thtml
admin/event/eventlist.thtml
admin/event/listitem.thtml
admin/group/grouplist.thtml
admin/group/listitem.thtml
admin/story/liststories.thtml
admin/topic/listitem.thtml
admin/topic/topiceditor.thtml
admin/topic/topiclist.thtml
calendar/editpersonalevent.thtml
calendar/eventdetails.thtml
search/searchform.thtml
search/searchresults.thtml
submit/submitevent.thtml
users/getpasswordform.thtml

In style.css, four classes have been added that are used in the new search code of Geeklog 1.3.8. Instead of copying over the entire file, you will probably only want to copy over the code for those four classes: searchAuth, searchDate, searchHits, highlight.

If the header.thtml of your theme is using the {menu_elements} variable, then you do not need to make any changes to it. If it is not using that variable, then you will need to make one change to it. In that case, search your header.thtml for the link to the story submission form, i.e. something like

    <a href="{site_url}/submit.php?type=story">

and change it to read

    <a href="{site_url}/submit.php?type=story{current_topic}">

Removed template files

If you have a file named commentheader.thtml in your theme directory, you can safely remove it. It isn't used at all.

Theme changes in Geeklog 1.3.7

Please note that all the following changes are optional. Themes made for Geeklog 1.3.6 will work just fine with Geeklog 1.3.7 - no changes are necessary.

New features and improvements

Other changes

Theme changes in Geeklog 1.3.6

There have been a lot of changes in the themes for 1.3.6 to get rid of the last pieces of hard-coded english texts so as to make localisation easier. Most of these changes have been made in the Admin editors (admin directory) and the calendar (calendar directory). If you created your own theme for an earlier version of Geeklog, we recommend that you copy over these two directories from one of the themes that come with Geeklog (choose one that is similar to your own theme or which it was originally based on). It seems like most Geeklog themes didn't change these files anyway, so this shouldn't be too much of a hassle ...

Other changes

CSS changes

Note: Theme authors are encouraged to specify a character set in the header.thtml of their themes like this:

<meta http-equiv="Content-Type" content="text/html; charset={charset}">

Geeklog will replace the {charset} variable with the proper character set based on the currently used language file. Also make sure that you put the above line before the <title> tag in the <head> section of your header.thtml file.