When hired for web redesigns, 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: <?php require ‘/path/to/livewhale/cache.livewhale.php’;?> (The actual path differs from server to server, but you may copy the correct path from existing templates.)
- Next, a page must have sections defined as editable. Typically certain div elements are defined this way, for example a main content area and a sidebar. To do this, the element must contain a unique id attribute and the class “editable”. For example: <div id=”maincontent” class=”editable”>.
- If the editable area should not be visible unless it contains content, you may add the “optional” class to the element. For example: <div id=”maincontent” class=”editable optional”>. This is to prevent the empty element from affecting page layout when there is no content to display. This functionality is 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. For example, if a sidebar element is optional and left empty, you may wish to use the special body class to change the main content area to full width and claim the space normally occupied by the sidebar element.