Custom layouts

A homepage layout is a UI macro whose name begins with layout_. You can create a UI macro to define a custom layout.

To view the list of available layouts, navigate to Homepage Admin > Layouts.
  • Layouts are XHTML scripts that contains one or more dropzones.
  • Dropzones are defined by a TD (table data cell) within the HTML where content can be placed.
Note: Knowledge of Jelly is required to understand the following example.

For example, here is the code for a layout.

<?xml version="1.0" encoding="utf-8"?>
    <j:jelly trim="true" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<table border="0" cellspacing="6" id="${jvar_name}" width="100%">
		<tr>
			<td colspan="2" id="dropzone0" dropzone="true"/>
		</tr>
		<tr>
			<td id="dropzone1" dropzone="true" valign="top" width="50%"/>
			<td id="dropzone2" dropzone="true" valign="top" width="50%"/>
		</tr>
		<tr>
			<td colspan="2" id="dropzone999" dropzone="true" valign="top"/>
		</tr>
	</table>
    </j:jelly>
Rules for scripting layouts:
  1. A layout must contain at least one table.
  2. All dropzones must be TDs within a table.
  3. A dropzone has two key attributes:
    1. Its ID starts with "dropzone" (e.g., "dropzone2" or "dropzone3").
    2. It has an attribute of dropzone="true."
  4. Dropzone IDs must be unique (e.g., you can't have two dropzones named "dropzone1").
Optional layout features:
  • Nested tables are allowed, so it is possible to have a table within a TD within a table.
  • There can be TDs that are not dropzones.
  • Styles and formatting elements are acceptable.
  • Fixed-width TDs (as opposed to variable width) are allowed, although some content, such as graphs, must have a significant minimum width.
  • Fixed-height TDs are allowed.
Layout hints and tips:
If cellspacing and cellpadding are set to zero, the drag-and-drop algorithm may have trouble distinguishing one cell from another, since multiple empty cells can potentially occupy the same point in space. It is still possible to place things via the layout control, and they will render properly. However, to use drag-and-drop to move things around, do not drop both cellspacing and padding to zero.