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 HTML 4.01 Transitional (for GL v1.4.1 version, upcoming GL v1.5 to be HTML 4.01 Strict or XHTML Transitional 1.0 via a switch in the theme's functions.php)

• Support for a 4 level cascading menu in the header.

• Extra block styling options for both left and right blocks.

• MooTools Javascript Library v1.11 integration. We have also included some MooTools based javascript widgets. See below for info on how to use them.

• Additional typography elements with enhanced block class styling, quote & code styling, list styling, and more.

• Yahoo User Interface reset-fonts-grids.css, and base-min.css support.

We have tested it in Firefox 2 and 3, IE 6/7, Opera 9, and Safari beta 3 on Windows. In other browsers, your mileage may vary. Check out a working demo at http://demo.geeklog.net.

This work is distributed under the terms of the GPL, which means that you are free to use and modify it for any purpose.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License at http://www.gnu.org/licenses/gpl-3.0.txt for more details.

Individual files in the archive may fall under other open-source license terms. When applicable, those license terms take precedence over those declared above.

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

• Mark R. Evans - Mark developed the custom functions.php to overcome limitations in Geeklog's native rendering engine and thereby enabling true div-based themes while still being able to switch dynamically between Geeklog's leftblocks, rightblocks, no blocks rendering structure.

• Joe Mucchiello - Joe is the author of the Caching Template 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 professional 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.

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

Unzip all of the contents of this theme and upload into your public_html/layout/ directory. Once uploaded, you should have 2 or more folders, including “professional”, and “nouveau”.

If you would like to change the theme for only you, login to your site and click on My Account in the User Functions block. Then click on the Layout & Language tab, and choose “nouveau” under the Theme dropdown box.

Nouveau is a very flexible layout, and can be modified dramatically with just a few easy changes. Below are some common changes one might make to the theme to personalize it.

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 opening public_html/layout/nouveau/header.thtml 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/css/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.

To enable the gl_moochronometer, simply open htmlheader.thtml and uncomment the tag. This calls code in functions.php that will call the gl_moochronometer.js file.

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 css/style.css:

#gl_header { /*comment out the background below if using gl_moochronometer.js*/
  /*background:url(../images/header-bg.png) 0 0 repeat-x; */
  height:100px;
}
/*gl_moochronometer header images*/
#dawn #gl_header {
  background:url(../images/header-bg-dawn.jpg) 0 0 repeat-x;
}
#day #gl_header {
  background:url(../images/header-bg-day.jpg) 0 0 repeat-x;
}
#afternoon #gl_header {
  background:url(../images/header-bg-afternoon.jpg) 0 0 repeat-x;
}
#dusk #gl_header {
  background:url(../images/header-bg-dusk.jpg) 0 0 repeat-x;
}
#night #gl_header {
  background:url(../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 js/gl_moochronometer.js, make any appropriate changes, and uncomment the code to load the additional css file. 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:

To change the css for the different block styles, open css/style.css and refer to the block style section.

We have included some extended typography classes for use with Nouveau. There are many custom span classes, and list classes to choose from to make your site more visually appealing.

Nouveau includes the Yahoo User Interface CSS files that provide a unified base CSS declaration across A-grade browsers. These four files, and descriptions quoted from the developer's site are:

• Reset - The foundational YUI Reset CSS file removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions.

• Fonts - The foundational YUI Fonts CSS file offers cross-browser typographical normalization and control. Fonts CSS:
  • Offers full A-grade browser support.
  • Provides consistent font sizing and line-height.
  • Provides appropriate cross-OS font-family degradation paths.
  • Supports user-driven font-size adjustment in the browser, including cross-browser consistency for adjusted sizes.
  • Works in both “Quirks Mode” and “Standards Mode.”

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

• Base - Base is an optional CSS file that compliments YUI's core CSS foundation (Reset, Fonts, and Grids). While Reset removes and neutralizes the inconsistent default styling of HTML elements, Base applies a consistent style foundation for common HTML elements across A-grade browsers.

We have included the concantenated yui_reset-fonts-grids.css file, and yui_base-min.css in the nouveau/css directory, and they are called in htmlheader.thtml with the following code:

<link rel="stylesheet" type="text/css" href="/css/yui_reset-fonts-grids.css" title="">
<link rel="stylesheet" type="text/css" href="/css/yui_base-min.css" title="">

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 Geeklog 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 Geeklog siteHeader() and siteFooter() PHP function calls with special versions that do things a bit differently. One of Geeklog’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 Geeklog 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, Geeklog 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 Geeklog siteFooter() function will then perform the following actions:

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

Geeklog has traditionally used a table to control the overall layout, which works very well when the web page is built and sent to the browser in the same physical order that it is displayed. Since Nouveau breaks away from the table based layout and also needs to send the site content first, we had to drastically change the way the siteHeader() and siteFooter() functions perform.

The Nouveau siteHeader() function call is responsible for creating the HTML header only. All other content creation and output is handled by Nouveau’s siteFooter() function. Since the Nouveau siteHeader() function creates only the HTML header code, we had to create a new template file, htmlheader.thtml. This template contains only the HTML header and the HTML body tag.

The Nouveau 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 Nouveau to capture all the Geeklog and plugin output so it can be used in the new siteFooter() call.

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

• End the capture of the Geeklog / 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 Nouveau 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. This is accomplished without any hacks or modifications to the core Geeklog code. Instead, we leverage the hooks provided by Geeklog to replace the core siteHeader() and siteFooter() functions.

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

gl Labs has standardized on the MooTools JavaScript library to provide several new sets of features and functionality to plugins and layouts. One of the challenges is to ensure that the MooTools library is only loaded once, and is loaded before any other JavaScript libraries that depend on MooTools. To accomplish this goal, all gl Labs plugins and layouts check the existence and value of a global variable named $gllabsMooToolsLoaded. If $gllabsMooToolsLoaded is not set, or is zero, the Nouveau siteHeader() function will include the proper HTML to include the library.

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

Nouveau’s custom functions.php will create a template variable 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 right / left 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.

Geeklog uses the same template variable, , to output both the left and right set of blocks. Since Geeklog handled the left blocks in the siteHeader() function and the right blocks in the siteFooter() function, this was not a problem. Since Nouveau now handles both the left and right blocks in the siteFooter() function, we had to rename the right blocks. Nouveau will use the standard template variable called for the left blocks, and a new template variable called for the right blocks.

You can easily use Nouveau’s functions.php file in your own custom layout. The only modification needed would be to rename the following two functions:

Rename nouveau_siteHeader() to yourthemename_SiteHeader() and nouveau_siteFooter() to yourthemename_siteFooter().

You will want to use the same standardized CSS classes as well.

One of the benefits of including the MooTools compact javascript library, is the ability to create custom widgets that bring additional functionality to your site. Each of the widgets below function by adding HTML code to a static page. You can then position the static page however you like on your Geeklog powered site (ie. above or below the featured story, at the bottom of the page, etc.) Additionally, some widgets can be placed within .thtml files for a constant site presence.

Typically, the code will call an external javascript file (or you can include the code inline), and then you will wrap the widget contents in a div tag, with appropriate id and class selectors.

By default, the css styling for all gl_moo-based widgets is located in css/gl_moo.css.

By implementing MooTools FX.Slide class, Nouveau has the ability to create slideable div elements where you can place additional content that is initially hidden, then once a link is clicked, the div will slide into view either horizontally or vertically, depending upon the parameters specified.

To create a mooDrawer widget, create a static page with the following code:

<script type="text/javascript">
window.addEvent('domready', function() {
 
//--horizontal slide
    var mySlideH = new Fx.Slide('gl_moodrawerH', {mode: 'horizontal'}).hide();
        $('toggleH').addEvent('click', function(e){
            e = new Event(e);
            mySlideH.toggle();
            e.stop();
        }); //end horizontal slide
 
//-vertical slide
    var mySlideV = new Fx.Slide('gl_moodrawerV').hide();
        $('toggleV').addEvent('click', function(e){
            e = new Event(e);
            mySlideV.toggle();
            e.stop();
        }); //end vertical slide
 
});
</script>

Then, below the above javascript code, create your div elements with the proper id selectors, either gl_moodrawerH or gl_moodrawerV, and then create your toggle link with the id selector ( toggleH or toggleV) that will slide in/out the content div:

<div style="width:300px; padding:10px; clear:both;" id="gl_moodrawerV">
    <span class="info">Using MooTools, you can place any content you want in drawers!
        <p>This is an example of a vertical drawer.</p>
    </span>
</div>
 
<a href="#" style="float: left;" id="toggleV">Introducing Vertical MooDrawers</a><br />
<a href="#" style="float: left;" id="toggleH">Introducing Horizontal MooDrawers</a><br />
 
<div style="width:300px; padding:10px; clear:both;" id="gl_moodrawerH">
    <span class="info">Using MooTools, you can place any content you want in drawers!
        <p>This is an example of a horizontal drawer.</p>
    </span>
</div>

MooTools allows you to animate a morph between CSS property states. For instance, we can animate the Geeklog site messages, and have them fade away after a specific amount of time.

<script type="text/javascript">
window.addEvent('domready', function() {
var myFade = new Fx.Styles('fade', {duration: 1000, transition: Fx.Transitions.Cubic.easeIn});
    myFade.start.delay(5000, myFade, {
        'height': 0,
        'opacity': 0
    });
});
</script>
<div class="morph-start" id="fade">
    <div style="padding:5px;color:#FFFFFF;background:url(http://nouveau.gllabs.org/layout/nouveau/images/header-bg.png) #1A3955;">
        <span class="floatright"></span>
            System Message - 04/04 09:47PM
    </div>
    <div style="padding:5px 15px 15px 15px;border-top:3px solid black;background:#E7E7E7;">
        <p style="padding:5px"><img src="http://nouveau.gllabs.org/layout/nouveau/images/sysmessage.png" border="0" align="left" alt="" style="padding-right:5px; padding-bottom:3px">
            Use this to morph between two CSS states.<br />
            After 5 seconds, this message will automatically fade away and roll up.
        </p>
    </div>
</div>

The gl_moorotator widget is a sequential image rotator with hyperlinks and optional descriptive text. Created with javascript, it provides an alternative to using Flash to rotate featured content links on your site.

To create a gl_moorotator widget, go to the Static Page admin interface, and create a static page, and make sure Post Mode is set to HTML Formatted. Then enter the following code, inserting your own content where specified:

<script type="text/javascript" src="../../layout/nouveau/js/gl_moorotator.js"></script>
<script type="text/javascript">
    window.addEvent('domready', function() {
        var rotator = new gl_mooRotator('gl_moorotator', {
            controls: true,
            delay: 7000,
            duration: 800,
            autoplay: true
        });
    });
</script>
<div style="padding-top: 20px; height:180px;" id="gl_moorotator">
    <div class="gl_moorotator">
        <div class="gl_moorotatorimage">
            <a href="#">
                <img src="my image" alt="my alt text" />
            </a>
        </div>
        <div class="gl_moorotatortext">
                    <b>Title 1</b>
                <p>
                <!-- insert your text content here -->
                </p>
        </div>
    </div>
    <div class="gl_moorotator">
        <div class="gl_moorotatorimage">
            <a href="#">
                <img src="my image" alt="my alt text"/>
            </a>
        </div>
        <div class="gl_moorotatortext">
                    <b>Title 2</b>
                <p>
                <!-- insert your text content here -->
                </p>
        </div>
    </div>
<!-- repeat as needed -->
</div>

Set In a block to unchecked, and save your static page, including any other placement options you desire.

The gl_mooslide widget allows you to create multiple content elements, and then alternate between viewing those elements within the display area. This maximizes the use of screen space, keeps the overall page layout cleaner, and allows for enhanced user interaction with your site.

You can navigate between the content elements by either clicking on the individual tab header links, or by using the blue previous and next buttons.

To create a gl_mooslide widget, go to the Static Page admin interface, and create a static page, and make sure Post Mode is set to HTML Formatted. Then enter the following code, changing the tab title, and inserting your own content where specified:

<script type="text/javascript" src="../../layout/nouveau/js/gl_mooslide.js"></script>
<script type="text/javascript">
    window.addEvent('domready', function() {
        var myFilm = new gl_Slide($('gl_slide'), {
            fx: {
                wait: true,
                duration: 1000
                },
            scrollFX: {
                transition: Fx.Transitions.Cubic.easeIn
                },
            dimensions: {
                width: 550,
                height: 160
                }
        });
    });
</script>
 
<div id="gl_slide" class="gl_slide">
    <div class="tab-pane" id="tab-0-pane">
        <h1 class="tab-title">Tab 0</h1>
        <div> <!-- insert your content here --> </div>
    </div>
    <div class="tab-pane" id="tab-1-pane">
        <h1 class="tab-title">Tab 1</h1>
        <div> <!-- insert your content here --> </div>
    </div>
    <div class="tab-pane" id="tab-2-pane">
        <h1 class="tab-title">Tab 2</h1>
        <div> <!-- insert your content here --> </div>
    </div>
    <!-- etc. repeat for as many tabs as you need -->
</div>

Set In a block to unchecked, and save your static page, including any other placement options you desire.

Like the gl_mooSlide widget above, the gl_mooSpring widget is a great way to showcase content, while maximizing layout space. This widget is geared toward prominently displaying important links on your site, and will grab the attention of your visitors, keeping them engaged as they interact with the fun, yet unobtrusive sizing animation. Use them as supplimental menus to important areas of your site.

To setup this widget, go to the Static Page admin interface, and create a new static page. Make sure Post Mode is set to HTML Formatted, then enter the following code:

<script type="text/javascript" src="../../layout/nouveau/js/gl_moospring.js"></script>
<center>
<div id="gl_moospring">
    <ul class="gl_moosprings">
        <li>
            <a class="gl_moospring gl_moospring1" href="http://www.gllabs.org/filemgmt/index.php?id=191">
                <span>Grab It</span>
            </a>
        </li>
        <li>
            <a class="gl_moospring gl_moospring2" href="http://gllabs.org/wiki/doku.php?id=geeklog:themes:nouveau">
                <span>Read It</span>
            </a>
        </li>
        <li>
            <a class="gl_moospring gl_moospring3" href="http://www.gllabs.org/forum/">
                <span>Say It</span>
            </a>
        </li>
        <li>
            <a class="gl_moospring gl_moospring4" href="http://gllabs.org/wiki/doku.php?id=gllabs">
                <span>Join Us</span>
            </a>
        </li>
    </ul>
</div>
</center>

Set In a block to unchecked, and save your static page, including any other placement options you desire.

To create more than 4 spring elements, open css/gl_moo.css and adjust the height and width values for the #gl_moospring selector. Then add the appropriate css for the total number of springs desired. For instance:

#gl_moospring .gl_moospring5 {
background:url(../images/myimage5.jpg) no-repeat;
}
#gl_moospring .gl_moospring6 {
background:url(../images/myimage6.jpg) no-repeat;
}

Finally, add the additional list item elements to the static page code, as follows:

        <li>
            <a class="gl_moospring gl_moospring5" href="http://gllabs.org/wiki/doku.php?id=gllabs">
                <span>My Spring 5</span>
            </a>
        </li>
        <li>
            <a class="gl_moospring gl_moospring6" href="http://gllabs.org/wiki/doku.php?id=gllabs">
                <span>My Spring 6</span>
            </a>
        </li>

((total_springs -1) * squeeze_to) + max_width < #gl_moospring

This widget allows you to include an slimline RSS feed in your site. By default, it is setup as a staticpage, but you can easily copy the code to anywhere in your template. The feed links dissolve from one to the next, and when you hover over a link, it pauses the timer. There are also previous and next buttons to navigate the feed manually.

To setup this widget, first create a portal block in the Block admin interface, give it a Title and Block Name of gl_mootickerRSS, and uncheck the Enabled box.

Make sure you set Type to Portal Block. (The other settings don't matter much, as the block will be hidden anyways.)

Finish filling in the parameters for your RSS URL, and then save it.

Go to the Static Page admin interface, and create a static page with the Title and ID of gl_mootickerRSS, and make sure Post Mode is set to HTML Formatted. Then enter the following code:

echo gl_mootickerRSS();

Set In a block to unchecked, and set PHP to execute php (return). Save your static page, including any other placement options you desire.

By default, Nouveau implements MooTools Tips by calling the following javascript code in htmlheader.thtml:

        var Tips1 = new Tips($$('.gl_mootip')); //enables use of tooltips
        var Tips2 = new Tips($$('.gl_mootipfade'), { //enables use of fade in/out tooltips
            initialize:function(){
                this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
            },
            onShow: function(toolTip) {
                this.fx.start(1);
            },
            onHide: function(toolTip) {
                this.fx.start(0);
            }
        });
        var Tips3 = new Tips($$('.gl_mootipfixed'), { //enables use of fixed position tooltips (good for hover help text)
            showDelay: 150,
            hideDelay: 400,
            fixed: true
        });

In its most basic form, to create an onhover tooltip, simply give your element the class selector of “gl_mootip” and title of “Tip Title :: Tip Content” like this example from the main site logo in header.thtml:

<a href="" class="gl_mootip" title=" :: ">

To create a tooltip that fades in/out, use the class selector of “gl_mootipfade”. To create a tooltip that is fixed in place (typically used for help dialogs on text links), use the class selector of “gl_mootipfixed”.

If you do not include the :: seperators in your title markup, the tooltip title will automatically be set to the URL of the link, and what you included within the ” and ” will display as the Tip Content.

To change the styling of the mootips, edit the gl_mootips CSS section of gl_moo.css.

• Nouveau includes code to determine whether the MooTools javascript library was loaded by itself, or a previous plugin. 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.