Nouveau Theme for glFusion

Nouveau is a fixed & fluid width, blue & grey neutral theme. It features:

• Both Fluid and Fixed width versions of the theme, one line configurable in header.thtml.
• Tableless markup. All appropriate markup is created with <div> tags and CSS elements.
• Validates to XHTML 1.0 Transitional
• Support for a 4 level cascading menu in the header.
• Integrated with glFusion's Site Tailor Plugin.
• Extra block styles with options for both left and right blocks.
• MooTools Javascript Library v1.11 integration. We have also included some MooTools based javascript widgets.
• Additional typography elements with enhanced block class styling, quote & code styling, list styling, and more.

We have tested it in Firefox 2, IE 6/7, Opera 9, Safari beta 3 on Windows, and Google Chrome. In other browsers, your mileage may vary.

Nouveau was realized with the inspiration and talents of the following individuals:

• Mark R. Evans - Mark developed the custom functions.php to enable true div-based themes while still being able to switch dynamically between glFusion's leftblocks, rightblocks, no blocks rendering structure.
• Joe Mucchiello - Joe is the author of the Template Cache Library which not only speeds up page load times, but also allows for theme developers to do away with redundant .thtml and image files in their themes, pulling them instead from the default theme layout directory.
• Eric Warren - Eric was responsible for developing the overall look and feel of Nouveau, taking the best of what's been done before, and remixing it in a fresh new way.
• Layout Gala - Alessandro Fulciniti created the flexible layout skeleton used by the glFusion team in creating Nouveau. Using the same markup, and varying only the CSS for a handful of selectors, one is able to achieve 40 different layouts that can form the structure for almost any site design imaginable. Very powerful stuff!
• Bartelme.at - Wolfgang Bartelme is a designer based in Austria who focuses on creating standards compliant web sites, and professional icons for web sites and applications. Inspiration for the header design came from his site.
• Rockettheme.com - Joomla CMS based theme development studio. Many of the more refined javascript widgets, including the main menu design and animation javascript, were adaptations of MIT-style licensed MooTools based effects showcased at Rockettheme.com. Additionally, they were the inspiration for creating extended typography classes in Nouveau. If you have a Joomla install, we highly recommend checking out some of their innovative work.

Nouveau includes support for both fluid and fixed size page widths. Both width methods have their strengths and weaknesses, and both layout types have their applications.

Fluid width pages maximize the use of available space in the browser window, but content and typography can shift location depending upon page width, which can lead to undesirable effects. Fixed width pages tend to leave significant blank space to either side of the layout when viewed at higher screen resolutions, but content and typography is fixed, so it is always viewed as intended.

By default, Nouveau is set to create a fluid width layout, but can be easily modified by copying public_html/layout/nouveau/header.thtml to public_html/layout/nouveau/custom/header.thtml and then opening it and changing:

<div id="gl_container_fluid">

to

<div id="gl_container_fixed">

In addition, you can specify the width of the fixed layout by opening public_html/layout/nouveau/style.css and editing the width property:

#gl_container_fixed {
  ...
  width:780px;
  ...
}

Using some MooTools javascript magic, you can rotate the site header image according to the time of day set on the client's browser. Enabling this chronometer provides a custom experience for each guest, no matter where they are in the world, and is totally independent of where your server resides. Click here to see a live example.

To enable the gl_moochronometer, simply open public_html/layout/nouveau/functions.php and uncomment the following code:

$js[] = $_CONF['path_html'] .'javascript/mootools/gl_moochronometer.js';

The chronometer functions by getting the client browser's time of day, and setting the body's id tag to the browser's time of day. For example:

<body id="afternoon" dir="ltr">

Then, by adding #afternoon before any other selectors in your stylesheet, you force the browser to load that specific CSS code. For instance, from style.css:

#gl_header { /*comment out the background below if using gl_moochronometer.js*/
  /*background:url(layout/nouveau/images/header-bg.png) 0 0 repeat-x; */
  height:100px;
}
/*gl_moochronometer header images*/
#dawn #gl_header {
  background:url(layout/nouveau/images/header-bg-dawn.jpg) 0 0 repeat-x;
}
#day #gl_header {
  background:url(layout/nouveau/images/header-bg-day.jpg) 0 0 repeat-x;
}
#afternoon #gl_header {
  background:url(layout/nouveau/images/header-bg-afternoon.jpg) 0 0 repeat-x;
}
#dusk #gl_header {
  background:url(layout/nouveau/images/header-bg-dusk.jpg) 0 0 repeat-x;
}
#night #gl_header {
  background:url(layout/nouveau/images/header-bg-night.jpg) 0 0 repeat-x;
}
/*end gl_moochronometer header images*/

To customize the frequency of the chronometer, and optionally specify any additional stylesheets to load (which can effect other parts of your site and change the entire style), open public_html/yoursite/javascript/mootools/gl_moochronometer.js, make any appropriate changes, and uncomment the code to load the additional CSS files. Note that CSS files loaded by gl_moochronometer.js are not in lieu of the base style.css file. Rather, they build upon it.

Nouveau allows you to select among 3 different block header styles for both the left and the right blocks separately. To change styles, open either leftblocks.thtml or rightblocks.thtml and modify class=“gl_blockstyle1”.

The options are as follows:

Shaded Block Header w/ Title	Block Header w/ Title	No Title
gl_blockstyle1	gl_blockstyle2	gl_blockstyle3

To change the CSS for the above 3 pre-defined block styles, open public_html/layout/nouveau/style.css and refer to the block style section.

To create a specific style for a single block that is different from other blocks:

• Create your block in the Block Manager (Command & Control » Blocks » Create New), and save it. Note the Block Name you specify, as you will need it in the next step.
• Open your theme's functions.php file (i.e. public_html/layout/nouveau/functions.php by default), and look for references to $_BLOCK_TEMPLATE definitions. Below this section, add a new entry for your custom block, replacing <BLOCK NAME> with the actual Block Name of your block:

$_BLOCK_TEMPLATE['<BLOCK NAME>'] = 'blockheader-<BLOCK NAME>.thtml,blockfooter-<BLOCK NAME>.thtml';

• Save the functions.php file.
• Copy the default blockheader.thtml and blockfooter.thtml files from public_html/layout/nouveau/ to public_html/layout/nouveau/custom/ and then rename them, appending <BLOCK NAME> to the file name, like your specified in the functions.php file.
• Edit these new blockheader-<BLOCK NAME>.thtml and blockfooter-<BLOCK NAME>.thtml files to your liking and save them.
• Clear the CTL cache (Command & Control » Clear Template Cache) and your local browser cache (CTRL+F5).

We have included some extended typography classes for use within glFusion when using the Nouveau theme (or a theme based on it). There are many custom span classes, and list classes to choose from to make your site more visually appealing.

Starting with fresh installs of glFusion v1.1.0, an example staticpage with all the extended typography options is shipped by default. Click on the Typography link in the main navigation menu, or go directly to http://yoursite.com/staticpages/index.php?page=typography.

Nouveau includes the Yahoo User Interface CSS Grids file that provides additional layout capabilities across A-grade browsers. The description quoted from the developer's site states:

Grids - “The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Other features include:

• Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
• Supports easy customization of the width for fixed-width layouts.
• Flexible in response to user initiated font-size adjustments.
• Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
• Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
• Layouts less than 100% are automatically centered.
• Accommodates IAB's Ad Unit Guidelines for common ad dimensions.
• Offers full A-grade browser support.

We have included the yui_grids.css file as part of the base stylesheet located in public_html/layout/nouveau/style.css, lines 8 - 194 inclusive.

The Nouveau theme allows your site content to be sent to the browser in Content, Left Blocks, Right Blocks order. This is very different than the standard table-based approach of sending the content in the same physical order that it is viewed: Left Blocks, Content, Right Blocks. One of the main benefits of sending the content in Content, Left Blocks, Right Blocks order is that it presents the most important information first to automated tools such as search engines and screen readers.

We accomplish this magic by completely replacing the glFusion siteHeader() and siteFooter() PHP function calls with special versions that do things a bit differently. One of glFusion’s strengths is that it allows plugins and layouts to easily hook into the existing code or in some cases, completely replace blocks of code.

The core glFusion siteHeader() function call performs the following actions:

• Create / Output the HTML Header
• Create / Output the site header
• Create / Output the site navigation menu
• Create / Output the left blocks (if configured to display)
• Open the site content tag elements

After the siteHeader() call, glFusion and / or plugins will then output their content to the browser.

Once all the actual content has been sent to the browser, a call to the glFusion siteFooter() function will then perform the following actions:

• Close the site content tag elements
• Create / Output the site footer
• Close the HTML body tag

The siteHeader() function call is responsible for creating the HTML header only. All other content creation and output is handled by the siteFooter() function.

The siteHeader() function also performs one other very important task. It makes a call to the PHP function ob_start() which captures all output to the browser and queues it internally instead of physically sending it to the browser. This allows the system to capture all the glFusion and plugin output so it can be used in the siteFooter() call.

Once the HTML header has been sent, and the glFusion / plugin output captured, the siteFooter() function can now perform its magic. When siteFooter() is called, the function will perform the following actions:

• End the capture of the glFusion / plugin output by calling ob_get_contents()
• Create and output the site header
• Create and output the site navigation menu
• Create and output the site's main content (captured by ob_start())
• Create and output the left blocks
• Create and output the right blocks
• Create and output the site footer
• Close the HTML body tag

As you can see, all of the HTML for the web page is generated and output in the siteFooter() call. This allows the system to send the content in any order and allows for pure CSS markup to completely control the look and feel of the layout. This liberates us from the confinement previously experienced in table based layouts.

There are a few other features / tweaks that the siteHeader() and siteFooter() functions provide.

Nouveau utilizes several standardized CSS IDs to control the overall site look and feel.

The system will create a template variable {centercolumn} which contains the proper CSS id (#gl_content, #gl_content-full, #gl_content-wide-left, #gl_content-wide-right) for the center content based on whether the left and/or right blocks should be displayed. This approach is the key to providing a CSS only layout that can dynamically switch between 1, 2, or 3 column output depending on the page being displayed.

The system handles both the left and right blocks in the siteFooter() function. Because of this, we use the standard template variable called {glfusion_blocks} for the left blocks, and another template variable called {glfusion_rblocks} for the right blocks.

Nouveau used em measurements to determine the width of the right and left navigation areas. The em sizes are based on the initial font size set in the body tag. Using em measurements makes the display a bit more flexible, if someone wants to increase their default browser font, things scale much better.

To change the em values, use the following procedure:

First, you need to calculate your baseline, so if you want to use a font size of 60%, then calculate the base px font size:

16 * .60 = 9.6px - this is the base font size

Now you need to recalculate the em sizes for #gl_content, #gl_content-full, #gl_content-wide-left, #gl_content-wide-right, #gl_navigation, #gl_extra.

Using this formula, you recalculate the sizes

1 / parent_font(px) * desired pixels = em size

So, for #gl_content, the right margin is currently 15.79em, based on 192 pixels wide. So the new size in this example is:

1 / 9.6px * 192px = 20em

You can use this online em calculator to make things much easier. All you'll need to do is calculate your base size (the first formula above), then type in the desired pixel size and it will give you the proper em size.

Here are the equivalent default widths in pixels that Nouveau could use for the layout styles:

#gl_content {
background:#FFF;
height:1%;
margin:0 192px;
}
#gl_content-full {
background:#FFF;
height:1%;
margin:0 10px;
}
#gl_content-wide-left {
background:#FFF;
height:1%;
margin:0 10px 0 192px;
}
#gl_content-wide-right {
background:#FFF;
height:1%;
margin:0 192px 0 10px;
}
#gl_navigation {
background:#F7F7F7;
border:1px solid #CCC;
float:left;
margin-left:-100%;
width:180px;
height:1%;
}
#gl_extra {
background:#F7F7F7;
border:1px solid #CCC;
float:left;
margin-left:-182px;
width:180px;
height:1%;
z-index:10;
}

• The system loads the MooTools javascript library automatically. Since Media Gallery v1.6.0 is not aware of this routine, a site running MG 1.6.0 and Nouveau will have problems with some of the javascript functionality, since the library is being loaded twice, from two different sources, and they conflict with each other. Mark has released Media Gallery v1.6.1 to address this issue, please refer to this story for more details.

• There are issues with the stylesheet in older versions of the Dokuwiki plugin, as it was not built on the YUI default css foundation. Mark has released Dokuwiki v1.4.0 to address this issue, refer to this story for more details.

* One way to accomplish this is to install the Microsoft Virtual PC with the IE6 Virtual PC Hard Drive. The downloads are large but it is one of the more sure ways of testing IE6 without having an actual machine running IE6.

• In general simply modifying the height setting for #gl_header in public_html/layout/nouveau/style.css will work in most browsers but not in IE6. In order to get logos with a height greater than 100px to display properly you will need to update 3 height settings in your style.css. They are as follows:

#gl_header { /*comment out the background below if using gl_moochronometer.js*/
  background:url(layout/nouveau/images/header-bg.png) 0 0 repeat-x;
  height:126px;  /*set to the height of your logo image*/
}
...
.top-r-corner {
  background:transparent url(layout/nouveau/images/top-r-corner.png) 100% 0 no-repeat;
  height:126px;  /*set to the height of your logo image*/
}
...
.top-l-corner {
  background:transparent url(layout/nouveau/images/top-l-corner.png) 0 0 no-repeat;
  height:126px;  /*set to the height of your logo image*/
}

The Nouveau theme bundled with glFusion v1.0.1 and above addresses item #1 below. We have left it here for reference when dealing with Nouveau on the Geeklog platform. To create a min/max width in IE6, refer to item #2.

In style.css set the width in #gl_container_fixed to the width of your layout.

#gl_container_fixed {
  background:#FFFFFF; /*needs to be set here*/
  min-width:720px;
  width:1000px;   /*set to the fixed width setting you would like to use for your layout*/
  margin:auto;
  margin-top:20px;
}

and in public_html/layout/nouveau/ie6.css set padding-left: in #gl_navigation to 0.

#gl_navigation { /*the leftblocks*/
  background:#000;
  border-bottom:0px;
  border-left:0px;
  border-top:0px;
  padding-left:40px;  /*set to 0 for a fixed width layout*/
}

In your style.css file change the “width” setting to “max-width” and set the “min-width” and “max-width” settings to your desired layout boundaries in pixels.

#gl_container_fixed {
  background:#FFFFFF; /*needs to be set here*/
  min-width:800px;    /*minimum width of your layout*/
  max-width:1000px;   /*maximum width of your layout*/
  margin:auto;
  margin-top:20px;
}

Then in ie6.css your need to replace the “padding-left:40px” setting in #gl_navigation to “margin-right:40px”.

#gl_navigation { /*the leftblocks*/
  background:#000;
  border-bottom:0px;
  border-left:0px;
  border-top:0px;
  /*padding-left:40px;*/  /*Comment out or remove this line*/
  margin-right:40px;      /*replace it with this line*/
}

For additional support with Nouveau, or with the theme system in general, please post in our support forum at http://www.glfusion.org/forum/index.php?forum=35.