So the Inside Out template establishes a few different scenarios via some nifty javascript that tests the height of the left column to see if its smaller or taller than the browser window and implements either a fixed positioned menu (if the contents are smaller) or an absolutely positioned menu (if the contents are taller). The javascript for this function is in the templates/insideout/js/template.js file.

The menu in a fixed state.

The end result being that when the menu is smaller it's fixed in position and it stays at the same place regardless of where you are on the page as per the screenshot below. Notice that there is plenty of room in between the left menu and the bottom of the browser window.

The menu in an absolutely positioned state.

While if it's taller then it becomes absolutely positioned and scrolls as per the normal behaviour of elements that are not fixed in position. Notice that the left menu items extend beyond the browser window.

As you scroll down the page the left column moves upwards.

You can test this on the page by resizing the browser window to see the menu switch between fixed and absolute mode.

* Please note: because ie6 lacks the intelligence to understand the nature of the fixed position and despite there being some techniques that you can use to encourage it to used fixed positions for elements we have decided to give it an absolute position at all times.

Please note that the Inside Out template has an option to transform the left column so that it is either fixed or scrolls - this has been implemented for use with the panel menu. Given that the panel menu contents are dynamic - the height of the module changes - depending on which tabs are open, it's not possible to calculate the dynamic changes and therefore toggle the left column between absolute or fixed in its position.

If you are using a panel menu that never extends below the browser window eg it only has a few menu items in each panel - then you may like to keep the default behaviour (left column dynamic) otherwise it's recommended to set this option to "scrolling" in order to avoid having the menu items slip below the browser window.

For those of you who are new to bbcode, its the code that is traditionally used in forums and some comment systems - or a more in depth explanation from the BBCode website:

"It is similar to HTML in the sense that in BBCode one does also use tags to format something specific (contained within the tag). In BBCode tags are indicated by rectangular brackets surrounding a keyword, which is in turn transformed into HTML before being delivered to a web browser."

The beauty of this plugin is that it has the ability to transform bbcode anywhere in Joomla. 

Joomla's normal behaviour is to either strip out any html or render the actual html markup whenever you want to add it to fields such as content item titles, menu item titles etc The YVBB plugin on the otherhand, allows you to render html markup in menu items, content titles or any other field that you can normally only affect at a deeper template level.

So when it comes to creating a two line menu item with the core Joomla menu - this plugin makes it very easy.

The following screenshot highlights the syntax we have used on the demo site.  You don't of course have to use this exact syntax and you can specify any other type of BB code syntax for your menu items.

As you can see the plugin also renders the BBCode in the joomla admin.

The plugin can also (of course) render bbcode in content items and there are some very handy article linking options available also. Check out the documentation page for an overview of the other features of the plugin.

General Overview

Here is a quick run down of the modules we have used on the front page of the demo site.

• The search position is published to the top1 position..
• The login module is published to the panel1 position and the tab that triggers it opening and closing is poditioned in the top row area.
• The logo is controlled in the template parameters also and has a width of 3 cols to match the width of the left column below it.
• The slideshow is published to the banner position.
• The main menu is a core Joomla menu published the left position. You can see a full run down of the settings required to recreate the layout and the superfish menu in the Zen Grid Framework documentation. The two line menu is achieved by using our slight reworking of the original YVBB plugin that renders BB code anywhere on your Joomla site. Take a look at the creating  a two line menu tutorial for more information on how to do this.
• An instance of the Microblog module is published to each of the tab positions tab1, tab2,  tab4.
• A custom html module with raw html content is published to tab3.
• An instance of the core Joomla Most Read module is published to bottom1.
• An instance of the core Joomla Popular items module is published to bottom4.
• A core Joomla menu module is published to the footer position.

Setting up the slideshow

The slideshow module has the ability to display both Joomla content items and K2 items in a content fading / sliding / scrolling  module. The demo site uses Joomla content to display the content and the settings that were used are below:

Microblog Settings

The following screenshots highlight the microblog settings used for the tab1, tab2, tab3 positions. 

Click on the thumbnails to launch a larger image.