Add new layout templates

We can add new layout templates so that they can be assigned to portal pages or update the ready-use layouts to modify the existing skins or change how the pages display.

Layout templates are stored in the WebDAV filestore at the location /fs-type1/layout-templates. To add a layout template so that it can be assigned to portal pages, create a folder or copy and rename an existing layout template folder inside the root folder. Include all CSS files in the theme used by the new layout template.

Layout templates control the layout and positioning of the content on a page. The static layout template is called layout.html. The author of the layout template defines the HTML fragment markup and CSS for the layout of the page. The HTML fragment uses microformat to specify containers and components, such as portlets and iWidgets to include in the page.

This example defines a two-column layout, with a hidden container for widgets which participate in the wiring of the page, but are not visible themselves.

<div class="hiddenWidgetsDiv">

    <div class="component-container hiddenWidgetsContainer ibmDndRow" 
         name="ibmHiddenWidgets">
    </div>

    <div style="clear:both"></div> 

</div>

<div class="component-container ibm2Col ibmDndColumn" 
     name="ibmMainContainer">
</div>

<div class="component-container ibm2Col ibmRightCol ibmDndColumn" 
     name="right">
</div>

The meaning of the elements is as follows:

class="component-container"

The static page parser recognizes the microformat to define containers in the page layout modes that can contain components. Components can be portlets or widgets.

name="ibmMainContainer"

The name attribute on a component container identifier contained uniquely to the page. The static page parser uses the name to correlate containers when it updates the page definition. Using consistent names across layout templates preserves the container contents across template switches.

class="ibmDndColumn"

Required for client-side drag-and-drop support.

class="ibmDndRow"

Required for client-side drag-and-drop support.

class="ibm2Col"

Provides CSS positioning information.

class="ibmRightCol"

Provides CSS positioning information.

The ibm2Col and ibmRightCol classes will differ, depending on the requirements of the particular layout.

If you implement a complex layout template that requires its own JavaScript handling, ensure that the required JavaScript components are loaded and initialized by the theme. For best performance, build and minify all JavaScript used into a single, cachable file that can be loaded once and cached by the browser.

Add portlets and iWidgets to layout templates

We can add portlets and iWidgets directly to the layout template definition using the portlet microformat for static pages, or the iWidget definition specification. We can add portlets or iWidgets inside or outside of containers. The template is applied to the page as a copy. Therefore every page that uses the template has a new instance of the portlet or iWidget.

Parent: Layouts