Themes allow for the customization of the sites look and feel for all visual aspects (including plugins). However, to ensure that user defined themes are enabled and able to be changed, glFusion’s configuration needs to be modified to ensure theme changing is enabled.
You can set the site’s default theme on the Command & Control » Configuration screen, in the Theme configuration section. You can allow users to select other themes (or disable them selecting other themes), in the User and Submissions configuration section.
The base theme provided with glFusion is the Nouveau theme. Nouveau is a pure CSS based layout that is Search Engine Optimized (SEO) and provides a modern look. You can view the Nouveau specific documentation here.
Within the public_html/layout/ directory, you will find the theme folders. The names on the folders themselves will be read and shown to users as selectable themes in the event the Allow User Themes option is set to 'true'.
A theme needs to contain each plugin's theme-able items within it as well as any of the core templates the framework requires.
A template file is denoted with a .thtml extension and is the core file type used by glFusion’s template engine to fill in the user interface. Note that .thtml files are not complete (x)html files on their own, but rather are building blocks that when combined with each other by the template engine form a single cohesive page that is output to the web browser.
glFusion allows you to customize the theme template (.thtml) and css files without actually modifying the original files. This allows you to make your customizations with confidence that they will not be overwritten during an upgrade. glFusion does this by including a folder named custom in every directory where there are .thtml or .css files. The template engine will first look in these custom directories for files, then in their regular locations, when building the page.
To customize a template or css file, first copy it into the custom folder in the same directory, then make your modifications to that newly copied file.
To customize a template or css file that resides in the directory:
private/plugins/<plugin_name>/templates/
copy the .thtml or .css file into its /custom folder, or to create a theme specific version of that plugin file, copy it into the
public_html/layout/<theme_name>/plugins/<plugin_name>/ directory.
New with glFusion v1.1.3 is a config option to Include Template Comments in Page Source. When enabled, the {# and #} template comments will become <!-- --> HTML comments and will be included in the output to the browser. Also, the beginning and end of each template, along with it's physical location on the server, will be included in the output. This feature is useful if you are trying to determine which template controls a specific display item, or when developing a new theme.
glFusion uses the template engine of the PHP Base Library (also known as PHPlib). This library allows the use of so-called variables in the template files. A variable is a word enclosed in curly brackets, like this: {variable}.
When glFusion creates a web page it will replace the variables in the template files with certain values. A variable can hold static text (i.e. it will always be replaced with the same text), dynamic content (i.e. the number of comments to a story or the entire text of a story), or even the content of another template file (used for lists, for example).
Please note that not all variables are available in all template files. While the variable {site_url} (which holds the URL of your glFusion site) is available in most template files, many variables are only available in one template file (e.g. the variable {formatted_article} is only available in the article.thtml template file).
The following variables are available in the site header, (i.e. in the header.thtml template file):
| Variable | Resolves To | Description | |
|---|---|---|---|
| site_url | http://www.example.com | The URL of your glFusion site (the exact same URL you specified in the Site Url field in the main configuration screen. | |
| layout_url | http://www.example.com/layout/nouveau | The URL of the layout folder of the user's current theme. | |
| page_title | synergy - stability - style - glFusion | Holds either the site's slogan and name or the title of the current story and the site name. | |
| background_image | http://www.example.com/layout/nouveau/images/bg.gif | Points to a file named bg.gif in the images folder of the current theme, intended to be used as a background image. | |
| site_mail | admin@example.com | Email address where people can contact the site's administrator. Because of the spam problem, it is recommended you don't actually use this on your site and provide a link to the Admin's email submission form instead: {site_url}/profiles.php?uid=2 (where “2” is the user id of the person who will receive the email, usually the Admin user. | |
| site_name | glFusion Site | The name of your glFusion site, as specified in the Site Name field in the main configuration screen. | |
| site_slogan | synergy - stability - style | The slogan of your site, as specified in the Slogan field in the main configuration screen. | |
| welcome_msg | Welcome to glFusion Site, username | A welcome message, followed by the user's name (for registered users). | |
| datetime | Monday, September 29 2008 @ 11:43 AM MST | The current date and time, formatted according to the Date Format and Daytime Format settings in the main configuration's Locale section. | |
| site_logo | http://www.example.com/layout/nouveau/images/logo.png | Points to the logo image in the images directory of the current theme, intended to be used as the site's logo. This is usually a PNG image (logo.png), but the image type can be overwritten in a theme's functions.php file. | |
| css_url | http://www.example.com/layout/nouveau/style.css | Points to the style sheet of the current theme. | |
| theme | nouveau | Name of the current theme. | |
| charset | iso-8859-1 | The character set for the current language file. | |
| lang_id | en-GB | An ID representing the language used on your site. Ideally, this should be an ISO language/country code, i.e. 'en-GB' for British English. The value for this variable is the language shortcut used in the Language and Locale settings in the main configuration screen, when multi-language support is enabled. Otherwise, it's derived from $_CONF['locale'], which involves some guesswork. In the latter case, this may also end up with a value like 'German' if your site is running on a non-Unix system (and which is not a valid ISO code). | |
| lang_attribute | lang=“en-GB” | An HTML lang attribute (including the value) to be used in your site header's HTML to indicate the language of your site or of the current page, i.e. like so: <html {lang_attribute}> Please note that this variable is empty, i.e. not set, when the site's language ID does not appear to be a valid language code (see description of the lang_id variable above). | |
| feed_url | <link rel="alternate" type="application/rss+xml" hreflang="en-gb" href="http://www.example.com/backend/glfusion.rss" title="RSS Feed: glFusion"> | Provides links to all the relevant feeds for the current page (depending on the “header link in topic” setting in the Feed Editor). | |
| rss_url | http://www.example.com/backend/glfusion.rdf | The URL of your site's RSS feed (identical to {rdf_file}. This variable is also available in the site's footer.thtml. Deprecated: Use {feed_url} instead. | |
| rdf_file | http://www.example.com/backend/glfusion.rdf | The URL of your site's RSS feed (identical to {rss_url}. This variable is also available in the site's footer.thtml. Deprecated: Use {feed_url} instead. | |
| rel_links | <link rel="home" href="http://www.example.com/" title="Home"> | Provides a set of predefined link tags, offering additional navigation links and relationship information. | |
The following variables are available in the storytext.thtml file, storybodytext.thtml, featuredstorytext.thtml, featuredstorybodytext.thtml, archivestorytext.thtml, and archivestorybodytext.thtml template files. These files are used to render stories for the index page as well as the content of the {formatted_article} variable in the public_html/layout/nouveau/article/article.thtml file (which is used to display a story on its own page).
| Variable | Resolves To | Description | |
|---|---|---|---|
| site_url | http://www.example.com | The URL of your glFusion site (the exact same URL you specified in the Site URL filed in the main configuration screen. | |
| layout_url | http://www.example.com/layout/nouveau | The URL of the layout folder of the user's current theme. | |
| story_date | Monday, September 29 2008 @ 11:50 PM MDT | The date and time of the story, formatted according to the user's preferred date and time format. | |
| story_date_only | 22-Oct | The date of the story, formatted via the Date Only Format field in the Locale section of the main configuration screen. | |
| story_date_short | 10/22/02 | The date of the story, formatted formatted via the Short Date Format field in the Locale section of the main configuration screen. | |
| lang_views | Views | The word “Views” in the user's preferred language. | |
| story_hits | 42 | Number of times the story was read. | |
| article_url | http://www.glfusion.org/article.php?story=20080707224104910 | The full URL to the story on its own page (article.php). This will also reflect the correct URL when URL rewriting is activated. | |
| story_id | 20080707224104910 | The ID of a story (can be used to build URLs, i.e. for a “link to this story” link). | |
| story_title | glFusion v1.0.1 Released | The title of the story. | |
| story_title_link | glFusion v1.0.1 Released | The title of the story, as a hyperlink to the full story. | |
| story_introtext | The glFusion Community is pleased to announce… | When displayed on the index page, this variable contains The “intro text” part of a story. However, when displayed as an article on a single page, it contains both the intro text and the body text of the story. | |
| lang_todays_featured_article | Today's Featured Article | The words “Today's Featured Article” in the user's preferred language. Only available when the story is the featured story. | |
| story_counter | 1 | On the site's index page (index.php), this variable contains 1 for the first story, 2 for the second, etc. This is independent whether the first story is a featured story or not. The counter restarts with every new page (index.php?page=2, etc.). The variable contains 0 on the article page (article.php) and in story previews. | |
The following variables are only available when the story is displayed on the index page and the body text of the story is not empty:
| Variable | Resolves To | Description | |
|---|---|---|---|
| lang_readmore | read more | The words “read more” in the user's preferred language. | |
| lang_readmore_words | words | The word “words” in the user's preferred language. | |
| readmore_words | 62 | The number of words in the body text of the story. | |
| readmore_link | <a href="...">read more</a> (62 words) | Link to the story on a separate page, including the number of word in the body text. | |
| start_readmore_anchortag | <a href=".../article.php?story=20080707224104910"> | Opening tag for a link to the story on a separate page. | |
| end_readmore_anchortag | </a> | Closing tag for a link to the story. | |
| read_more_class | class=“story-read-more” | This variable is empty when the body text is empty and contains the class attribute when the body text is not empty. Use the story-read-more class to change the layout of the “read more” link. | |
| email_icon | (icon) | The email icon, linking to an email submission form to send the story to another person. The icon is pulled from the current theme's images/mail.png. | |
| print_icon | (icon) | The printer icon, linking to a “printer friendly” version of the story. The icon is pulled from the current theme's images/print.png. | |
| recent_post_anchortag | – | When no comments have been posted yet, this variable contains just a link to the comment submission form (just like {post_comment_link}). When there are comments to the story, then this variable does not contain a link but instead contains the user name of the person who posted the last comment as well as the date and time when that comment was posted. | |
The following variables are only available when comments on a story are enabled and when comments have been made to the story already:
| Variable | Resolves To | Description | |
|---|---|---|---|
| author_photo | <img class="userphoto" alt="" src="http://yoursite.com/images/userphotos/default.jpg" /> | This displays the comment author's profile photo (if any). | |
| comments_url | http://www.example.com/article.php?story=20080707224104910#comments | URL of the comments section (when a story is displayed on a separate page). | |
| comments_text | 2 comments | The number of comments, followed by the word “comments” in the user's preferred language. | |
| comments_with_count | 2 | The number of comments to the story (will always be 1 or greater). This string becomes a link as soon as there are comments available, pointing to <a href=”…/article.php?story=20080707224104910#comments”>. | |
| lang_comments | comments | The word “comments” in the user's preferred language. | |
| post_comment_link | <a href=".../comment.php?sid=20080707224104910&pid=0&type=article"> Post a comment</a> | Link to the comment submission form (using “Post a comment” in the user's preferred language as the link text). | |
The following variables are only available when the Show “Contributed By”? field is set to true in the Story section of the main configuration screen. For example, when you allow the name of the story's author to be displayed:
| Variable | Resolves To | Description | |
|---|---|---|---|
| lang_contributed_by | Contributed by: | The text “Contributed by:” in the user's preferred language. | |
| contributedby_uid | 7 | The user id of the story's author. | |
| contributedby_user | Mark | The user name (short name) of the story's author. | |
| contributedby_fullname | Mark Evans | The full name of the story's author. If the user hasn't filled in his/her full name, the user name is used instead. | |
| start_contributedby_anchortag | <a class="storybyline" href="http://www.example.com/users.php?mode=profile&uid=7"> | Opening tag for a link to the story author's profile (empty for anonymous authors). | |
| end_contributedby_anchortag | </a> | Closing tag for a link to the story author's profile (empty for anonymous authors). | |
| contributedby_url | http://www.example.com/users.php?mode=profile&uid=7 | Link to the story author's profile (empty for anonymous authors). | |
| contributedby_photo | <img class="userphoto" alt="" src=".../images/userphotos/Mark.gif" alt="Mark"> | User photo of the story author, if provided (always empty for anonymous authors). | |
| camera_icon | (icon) | Displays the camera icon (the same as in the Who's Online block) and links to the author's user profile if they have uploaded a user photo (never displayed for anonymous authors). | |
The following variables are only available if topic icons are enabled for the story and the user has not disabled topic icons in his/her display preferences:
| Variable | Resolves To | Description | |
|---|---|---|---|
| story_anchortag_and_image | <a href="http://www.example.com/index.php?topic=glFusion"><img src="..." ...></a> (shortened) | Topic icon for the story's topic, enclosed in a link to the site's index page, sorted by topic. | |
| story_anchortag_and_image_no_align | <a href="http://www.example.com/index.php?topic=glFusion"><img src="..." ...></a> (shortened) | Same as {story_anchortag_and_image} but without the align attribute for the topic image. | |
| story_topic_image | <img src="http://www.example.com/images/topics/topic_gl.gif" align="right" alt="glFusion" title="glFusion"> | Topic icon for the story. | |
| story_topic_image_no_align | <img src="http://www.example.com/images/topics/topic_gl.gif" alt="glFusion" title="glFusion"> | Same as {story_topic_image} but without the align attribute for the topic image. | |
| story_topic_image_url | http://www.example.com/images/topics/topic_gl.gif | Just the URL of the topic icon. | |
| story_topic_id | General | Id (internal name) of the topic, e.g. to be used in links. | |
| story_topic_name | General News | Topic name (as seen on the Sections block). | |
| story_topic_url | <a href="http://www.example.com/index.php?topic=General"> | URL to your site's index page, so that only stories with the story's topic are displayed. | |
The following variables are only available when the current user has the permissions to edit a story:
| Variable | Resolves To | Description | |
|---|---|---|---|
| edit_link | <a href=".../admin/story.php?mode=edit&sid=20080707224104910">edit</a> | Link to open the story in the admin's story editor. | |
| edit_icon | <a href=".../admin/story.php?mode=edit&sid=20080707224104910"><img src=".../images/edit.gif"></a> | An icon linking to the admin's story editor to edit the story. | |
| edit_url | http://www.example.com/admin/story.php?mode=edit&sid=20080707224104910 | URL to open the story in the admin's story editor. | |
| lang_edit_text | edit | The word “edit” in the user's preferred language. | |
Legacy themes are older themes that were originally designed to work with Geeklog and are based off the default Professional theme included in Geeklog.
glFusion has moved to a CSS, non-table based layout model. To support the flexibility of dynamic columns while leveraging the benefits of a CSS based layout, glFusion dynamically changes the style for the navigation (leftblocks), center, and extra (rightblocks) columns depending on which combination is being displayed. This approach is not compatible with the older, table based approach used in Geeklog.
To ease the transition for folks who wish to migrate from Geeklog to glFusion, we do include a compatibility module that does allow these older themes to work. But, they do not take advantage of many of the new features available in glFusion and certain features such as the advanced editor will not work. The goal of the compatibility module is to ensure a site does not break after migration, but it is not designed to be the main driver of your site's layout. Instead, we recommend you migrate to a Nouveau based theme for the long term.
If you have a large investment in a customized theme for Geeklog, your best option may be to stay with Geeklog. Keep in mind, you should select your CMS based on your needs. If you have a fully functional site that has the look and feel you want, why would you want to change? If there is some great feature in glFusion that you simply cannot live without, we certainly welcome you, but keep in mind, the theming engines are now very different and you should be prepared to spend some time customizing the Nouveau theme to meet your needs.
If you must use a legacy theme and you are willing to endure the limitations, the very first thing you should do is review the list of template changes in glFusion v1.1.0 and ensure you have those changes reflected in your theme.
After you migrate to glFusion you'll notice the right blocks stop displaying. You must edit the functions.php file in your theme directory and add the following line near the top (after the <?php )
$_CONF['right_blocks_in_footer'] = 1;
- add info about $themeAPI = 2;
By default, glFusion does not send individual style sheets to the browser, instead it consolidates all styles sheets and passes them via the css.php program. This functionality is disabled in compatibility mode. When using legacy themes, glFusion will continue to send plugin styles or stylesheets individually. Why is this important? When using the css.php method, all paths are relative to the site's root path. When sending the styles individually, the paths are relative to the current function….
For example, when you load the Forum plugin style sheet, it is loaded from the public_html/forum/ directory, so any reference to images in the stylesheet are relative to the public_html/forum/ directory. When using compatibility mode, the reference to images would be:
background:url(images/gl_mootip_bg200.png) top left;
When using the glFusion default method of calling stylesheets through css.php, the stylesheets are always loaded from the public_html/ directory. In this case, any references to images in the forum/image directory would be done like this:
background:url(forum/images/gl_mootip_bg200.png) top left;
The moral to this story…If you are going to use a legacy theme, you will need to edit the stylesheets for the bundled plugins and for glFusion to adjust the paths for the images.
Keep in mind, using the css.php method provides a significant performance increase since the server and the browser can send all stylesheets in a single call. Unfortunately, when using legacy themes, it is not possible to use this enhanced method of calling the stylesheets.
At this time, the advanced editor (FCKeditor) will not work when using a legacy theme.