Créer un thème pour Geeklog

• Overview
• Helpful Tools
• Porting a Theme
• Creating a Theme
• Testing Your Theme
• Sharing Your Theme
• Advanced Theme Topics

Creating a theme for Geeklog is easy and quite fast. The code, contents, theme (it is identical with the word 'layout' here ) and system language are properly separated.
If you know beginners level HTML and simple CSS then you can create a theme! There's no need to learn PHP / MySQL nor complicated CSS.

First, copy all the files of the existing professional theme (more than 200 files in 27 folders) to a new directory. No spaces are allowed in the new theme name!

Your existing theme is here: public_html/layout/professional
The new theme may be here: public_html/layout/my_new_theme

Keep the original professional theme on your webspace! This is good for trouble shooting.

Now edit the thtml files to suit your needs. The thtml files are more or less HTML files with CSS and some JavaScript at times. The directory you just created (my_new_theme) holds ALL templates Geeklog needs apart from those being used by plugins. 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:

• header.thtml (the horizontal head of your site)
• footer.thtml (the horizontal foot)
• storytext.thtml (where the stories are being displayed)
• style.css (all the colors, fonts etc.)

Maybe also:

• featuredstorytext.thtml (only if you plan to use the featured story function)
• archivestorytext.thtml (only if you plan to use the archive function)

You will wonder why Geeklog has so many more theme files when other CMS have a total of just 1 or 2. The reason is quite simple, you can change almost every corner of Geeklog also in the administration area.

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 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 , 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.

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 post on the Geeklog.net forum for details.

Polls: To use multi-colored bars in the graphical display of poll results, you can use the and variables in the pollbooth/pollvotes_bar.thtml template file. will be replaced with a running number for each answer, hence bar.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. will alternate between 0 and 1 for every answer, hence bar.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 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.

Error Message: Since Geeklog 1.4.1 it is possible to control what HTML is displayed to non-root users in the event of an error occurring (a crash bug). To do so, you need to change the function CUSTOM_handleError in lib-custom.php to output any HTML you like.

• Themes can now opt to use a {doctype} variable in their header.thtml instead of using a hard-coded DOCTYPE declaration. The DOCTYPE will then be set from the configuration (currently available: HTML 4.01 Strict and Transitional, XHTML 1.0 Strict and Transitional). Such a theme should not set the XHTML constant in its functions.php file!
• When using XHTML, the variable {xmlns} now contains xmlns=“http://www.w3.org/1999/xhtml” for XHTML compliance (to be used in the <html> element).
• Added a space between a story's intro text and body text when using the {story_text_no_br} variable.
• The story templates in the Professional theme now use {story_text_no_br} instead of {story_introtext}, i.e. there are no <br> tags between a story's intro text and body text any more. This allows for greater flexibility in formatting a story (e.g. when using the intro text for teasers) but may result in older stories being displayed differently now (no visible separation between intro text and body text).
• Bugfix: The variables {contributedby_user} and {contributedby_fullname} were always empty.
• The two variables {start_contributedby_anchortag} and {end_contributedby_anchortag} were not set any more (since Geeklog 1.5.0). Instead, the link to the author's profile was added to {contributedby_author}, so that the combination of these three variables (as used in the story templates) still seemed to work. Geeklog 1.6.0 reinstates the old definitions, i.e. the anchortag variables contain the opening and closing tag to link to the author's profile and {contributedby_author} contains only the author's name.
• New variable {photo_max_dimensions} to inform users about the max. dimensions of a userphoto: preferences/userphoto.thtml
• Added a print.css stylesheet to be used by the printable.thtml template files for articles and the static pages plugin.
• The plugin editor can now show a plugin's “display name” (or a beautified version of the directory name) when using the new variable {pi_display_name} in admin/plugins/editor.thtml. This is a purely cosmetic change.
• New template file admin/lists/inline.thtml, used when embedding lists into an existing HTML <form> (e.g. the new Groups editor).
• Added a “send copy to myself” option to profiles/contactuserform.thtml
• Cosmetic changes to the admin/mail/mailform.thtml template file: Removed {startblock_email} and {endblock_email} and the top table. These elements are now added automatically to make the the mail form look more consistent with the other admin panels.
• A new checkbox has been added to search/searchform.thtml to allow for a search in the title only.
• Cosmetic changes to the admin/group/groupmembers.thtml template file: The header (including the icon, links, and the instructions) is now generated by Geeklog. The <table> that contained these elements has been removed from the template file.
• Configuration: config_element.thtml was missing a closing </option> tag; the <col> tags in configuration.thtml were not XHTML compliant.

Search

The templates for the search form and search results have been changed and new template files have been added for the new display modes of the search results. We suggest to replace the entire search subdirectory in your theme with a copy of the directory from the Professional theme as it ships with Geeklog.

Comments

The commentform.thtml and commentform.thtml template files were changed to include a security token and a {notifcation} variable (for the new option to be notified of followup comments). Plugins

• The template file for the Polls editor has been changed to allow up to 40 characters for the poll id (pid): plugins/polls/templates/admin/polleditor.thtml
• The printable.thtml template file for the static pages plugin now uses print.css (see above). It also uses the HTML Strict doctype now.

Permissions Editor

The various instances of the Permissions Editor (where you can set the Read / Edit permissions for Owner, Group, Members, Anonymous) were using slightly different template variable names. From now on, the following names are defined everywhere:

• {lang_permissions} (headline)
• {lang_perm_key} (legend: R = read, …)
• {permissions_editor} (the actual checkboxes)
• {lang_permissions_msg} (“Note: members is all logged in member …)

Template files using the alternative names will continue to work, but new files should use the above names from now on.

Note: Themes made for Geeklog 1.5.0 or 1.5.1 should work just fine with Geeklog 1.5.2. In this release, we only fixed a few problems in the themes (detailed below) that also affected 1.5.0 and 1.5.1. The other changes listed here are optional.

Bugfixes

These changes are actual bugs in the template files that also exist in Geeklog 1.5.0 and 1.5.1. We recommend making these changes to all custom themes.

• The security token was missing from the trackback editor template file, admin/trackback/trackbackeditor.thtml
• The {start_storylink_anchortag} variable in the story templates was missing the closing '>'. This caused the story title to disappear on some themes. (This was a bug in Geeklog's code, so no theme changes required)
• The {site_admin_url} was missing from the Configuration form action in admin/config/configuration.thtml. This may have caused problems making configuration changes on some setups.
• Added a hidden old_pid input field to the polls editor template file, plugins/polls/templates/admin/polleditor.thtml, to fix problems when changing a poll's ID.

Other changes

These changes are optional. They fix cosmetic issues or issues that only affect some setups.

• Cosmetics: In the Professional theme, the last menu entry isn't different from the other entries, so the .header-navigation-container li.last rule in style.css is not needed for this theme.
• Internationalisation: The language direction variable, {direction}, was not available in the printer-friendly templates for articles and static pages.

(Variables)

Note: Themes made for Geeklog 1.5.0 are mostly compatible with Geeklog 1.5.1. We only made one mandatory change (for the Configuration admin panel) - all the other changes listed below are optional or adjustments for special setups (e.g. multi-language sites, right-to-left languages). See details below.

Important change: Configuration

The JavaScript code used for the Configuration admin panel used a generic name which caused conflicts with other JavaScript code. You should update the file admin/config/config_element.thtml to make sure your theme works with Geeklog 1.5.1. Multilingual blocks

The multi-language support for blocks introduced in Geeklog 1.5.1 relies on disabled blocks being swapped in dynamically. If you are using Geeklog's multi-language support, you may need to modify the piece of PHP code in your theme's functions.php so that it picks the correct templates for these multilingual blocks:

$lang = COM_getLanguageId();
if (empty($lang)) {
    $result = DB_query("SELECT onleft,name FROM  WHERE is_enabled = 1");
} else {
    $result = DB_query("SELECT onleft,name FROM ");
}

Prior to Geeklog 1.5.1, you will probably only find the first SQL request in your functions.php file.

Other changes

• In Geeklog 1.5.0, the behaviour of the variable (in header.thtml) changed so that it now only contains the actual page title or the site's slogan (in earlier versions, it contained both the site's name and either the page title or the site's slogan). This was done so that the combination could be used to place the page title before the site's name for better SEO. If you prefer to have the site's name first on the index page and the page title first on all other pages, you can now use the new variable
• In the Links plugin, links have an icon indicating that it's an external link (taking the user away from the current site). This icon did not show up properly for RTL languages (e.g Hebrew), making the link text unreadable. Since we could not find a way to make it show up properly in this case, the icon is not displayed when the text direction is switched to 'rtl' (for now).
• Added an optional feed-link class to be used for links to feeds (e.g. the new Story Option entry for topic feeds). In the Professional theme, a small feed icon (images/feed.png) is used as a background image for these links.
• An optional change to the comment/commentbar.thtml template file and the commentbar-line2 class in style.css to make the “Post a comment” button float to the left and easier to see. There were no changes in functionality and other commentbar layouts will continue to work as before.
• The story template files archivestorytext.thtml, featuredstorytext.thtml, and storytext.thtml are now using the variable to refer to the story text. Template files that use here will continue to work as before.

XHTML support

Geeklog now supports XHTML compliant themes. These themes should define the following constant in their functions.php file:

define('XHTML', ' /');

This will ensure that Geeklog switches to XHTML internally. If you want your theme be working both as an HTML and an XHTML theme, you should use the variable wherever XHTML requires a self-closing tag, e.g. <br /> would be written as <br>. If you don't plan to use the theme for HTML, feel free to hard-code your theme for XHTML only.

Note: If you're using XHTML, it is your responsibility to ensure that your site's content (stories, comments, etc.) is XHTML compliant. Geeklog does not convert your content to XHTML. “Contribute” - User submitted stories

Geeklog 1.5.0 supports the ability for users to specify story intro text and body text seperately rather than just the intro text. This can be turned on and off by changing the templates. The files:

• submit/submitstory.thtml
• submit/submitstory_advanced.thtml

Contain table rows containing the bodytext inputs. Simply removing these inputs returns behaviour to the original. Admin Menu, User Menu & Topic List

All the above mentioned items are now lists, using ul and li tags (and a new CSS class, blocklist, to hide the list bullets). Two new template files have been added to create these blocks:

• blockheader-list.thtml
• blockfooter-list.thtml

Please note that the variable that was present in pre-release versions of Geeklog 1.5.0 has since been removed. Security Changes

Many forms, particularly in the admin section of the site need a new hidden form field in order for saving the form/processing the action to work. Add:

<input type=“hidden” name=”” value=””>

To the following templates:

• admin/block/blockeditor.thtml
• admin/block/defaultblockeditor.thtml
• admin/config/configuration.thtml (new theme file for 1.5)
• admin/group/groupeditor.thtml
• admin/group/groupmembers.thtml
• admin/mail/mailform.thtml
• admin/plugins/editor.thtml
• admin/story/storyeditor.thtml
• admin/story/storyeditor_advanced.thtml
• admin/syndication/feededitor.thtml
• admin/topic/topiceditor.thtml
• admin/trackback/pingbackform.thtml
• admin/trackback/pingform.thtml
• admin/trackback/serviceeditor.thtml
• admin/user/edituser.thtml
• comment/reportcomment.thtml

Some plugin specific templates have also been changed, you may also need to check:

• plugins/calendar/templates/addevent.thtml
• plugins/calendar/templates/editpersonalevent.thtml
• plugins/calendar/templates/dayview/quickaddform.thtml
• plugins/calendar/templates/submitevent.thtml ( variable)
• plugins/links/templates/admin/categoryeditor.thtml (new theme file for 1.5)
• plugins/links/templates/admin/linkeditor.thtml
• plugins/polls/templates/admin/polleditor.thtml
• plugins/staticpages/templates/admin/editor.thtml
• plugins/staticpages/templates/admin/editor_advanced.thtml

Removed Files

The following template files have been removed and are no longer needed:

• admin/lists/menufields.thtml
• admin/lists/topmenu_nosearch.thtml
• admin/plugins/newlistitem.thtml
• admin/plugins/newpluginlist.thtml

System Message

The previously hard-coded CSS for the System Messages has been moved to the stylesheet (new CSS class sysmessage).

Changements antérieurs

• http://www.iconfinder.net