White Whale produces a number of flexible templates that can be used for many purposes. However, a new template will occasionally be needed. When administrators first set up templates from scratch, whether using a product such as Dreamweaver, a text editor, or any other process they are comfortable with, a couple simple steps are necessary to prepare a page for editing.
- At the very top of the file, you must include a hook to the LiveWhale application. This is done by using a standard PHP include to LiveWhale
//The actual path differs from server to server, apply the correct path to your file
<?php require $_SERVER['DOCUMENT_ROOT'].'/livewhale/frontend.php';?>
- A page must have sections defined as "editable". Typically, div elements are defined this way, such as a main content area and a sidebar. The element must contain a unique id attribute and the class “editable”.
<div id=”maincontent” class=”editable”>
- If an editable or non-editable area should not be visible unless it contains content, you may add the “optional” class to the element. This is to prevent the empty element from affecting page layout when there is no content to display. The "optional" class will work for any block element, including non-"editable" regions, an ID is required.
// This functionality is optional.
<div id=”maincontent” class=”editable optional”>.
// using optional on an non-editable region
<div id="main" class="optional">
- The document should use valid XHTML syntax. Generally LiveWhale is able to repair a new template and bring it into compliance with Tidy, but starting with a valid document leaves less room for error.
Once templates are created, these steps will no longer be necessary, as each new page created from a template will automatically satisfy this criteria.
Note: If any editable region marked as “optional” is left blank through the editing process, a special class will be added to the body of that page denoting the empty optional region. This will allow you to apply special CSS rules to the page under those conditions.
If a sidebar element is optional and left empty, you can use the special body class to change the main content area to full width and claim the space normally occupied by the sidebar element.