glFusion Wiki

Site Tools


glfusion:development:themes:overview

glFusion Theming Overview

glFusion uses a standard 3 columns layout with a header and a footer. The visual layout is controlled via template files and a style sheet. Changing the overall look and feel of your site can be as easy as modifying just a few template files.

glFusion's Way of Doing Things

One of the things I like most about glFusion is it's flexibility. You have the option to have a dynamic site that may display 3 columns on the main page, but only a left column and the main content when viewing the forum or Media Gallery. This flexibility gives you the ability to optimize the screen real estate. But, with this flexibility comes a few drawbacks. The main drawback is that it is very difficult to have a pure CSS site that can morph between 3 columns to 2 columns to possibly a single column. This is the main reason that the standard Professional theme uses a single table to define the columnar layout.

If you search the Internet for CSS vs Tables, you will find dozens of articles that talk about the pros and cons of one versus the other. Personally, I feel that using a single table to define the layout is a good thing. CSS is used everywhere else to define the colors, fonts, images and other layout items. You can still change the overall look by simply modifying only the stylesheet if you wish.

I have found that duplicating the Professional theme's approach to using a table to format the position of the left, center and right columns makes the overall theming process a little simpler. It also allows a site admin to take advantage of glFusion's flexibility of switching between 3 and 2 column displays when necessary.

How glFusion Defines the Screen

Let's take a look at the glFusion layout:

This is the standard Professional theme included with glFusion. You should use this theme as your starting point. Let's break down the layout…

Menu Bar

The very first area on the page is the Navigation Menu. The entries in this menu are dynamically created by glFusion based on the config.php settings and what plugins you have installed. You can also define custom menu elements by adding them to lib-custom.php. All the elements are placed into a template variable called {menu_elements}.

There are a few templates that control the look and feel of the navigation bar. The menu bar itself is in header.thtml. Each menu item is controlled by the template menuitem.thtml and menuitem_last.thtml. glFusion uses a different template for the last menu item in case you want to use a separator character, you would not include it on the final entry.

The site header is next, this is defined in the header.thtml template as well.

Some variables to take note of within this area include:

{site_url} - The web address of your site.

{site_name} - The name of your site (also used by the browser to title the top of the browser window).

{site_slogan} - The slogan of your site (again used by the browser to title the top of the browser window. The format is site_name - site_slogan - Browser_Name).

These variables are all dynamically generated by glFusion and are configured in glFusion's Online Configuration.

Left Column

The left column is defined using several templates. The main layout controlling the left columns position is defined in header.thtml. The actual contents is defined in several other templates: leftblocks.thtml, blockheader-left.thtml, and blockfooter-left.thtml.

The way glFusion works by default, this left column is always visible. glFusion can dynamically add/remove the right column depending upon what content is displayed in the center column, so any content you want to constantly show on any given page of your site should reside in the left column.

Note: You can also move the left column or “leftblocks” into the footer where it will always display on the right side of the page. For more info, see Advanced Theme Topics.

Right Column

The right column is defined using several templates. The main layout controlling the position is defined in footer.thtml. The actual contents is defined in the templates: rightblocks.thtml, blockheader-right.thtml, and blockfooter-right.thtml.

glFusion will dynamically add/remove the right column depending upon what content is displayed in the center column. For example, on the index page of your site, glFusion will render the left column, center column, and right column, but when you navigate to a plugin item like the Calendar, Forum, or Media Gallery, glFusion will only render the left column and stretch the center column to give the plugin more screen space.

In some of the more sophisticated plugins (ie. Media Gallery), the plugin author creates a config setting to control what columns will be displayed when viewing the plugin. Options include: left blocks only, right blocks only, left and right blocks, and no blocks.

Main Content

The body is also defined using several templates depending on what content is being displayed. The position and main style is defined in header.thtml.

For stories that appear on the home page, featuredstorytext.thtml and storytext.thtml control appearance. A story that is featured will render topmost on the page (regardless of publication date), followed by regular stories sorted by date.

Within these template files, several variables are called, the most important of which are:

{story_title} - The main title of the story.

{contributedby_author} - The author of the story.

{story_date} - The date the story was published.

{story_introtext} - The intro to the story.

Note however that the styles defined for most of the elements within these files are found in the theme's style.css file. It is recommended to make the bulk of your changes there, rather than in the .thtml files themselves.

The footer is defined in footer.thtml. This is also where the {rightblocks} are called. Variables here include {copyright_notice}, {powered_by}, and {execution_textandtime}.

Your footer is a great place to put links to info that is not really a part of your main site. For example, links to your site's Terms of Use or Privacy Policy pages, your site's stats.php page, or credit/thanks for design and layout. Also, an anchor tag to return to the top of the page is helpful so that your site visitors don't have to scroll all the way back up the page.

glfusion/development/themes/overview.txt · Last modified: 2017/04/12 21:13 (external edit)

Page Tools