Layout Editor

See also: Layous

For page specific information, see Pages.

Design Practices

Depending on your level of knowledge with HTML/CSS/JS unroole pages can be designed in one of three ways.

• Standard - Good for someone with little to no HTML/CSS/JS knowledge to build a page using theme style only.
• Static - Good for pages that don't fit within the page box model and admins who have a high level of HTML/CSS/JS knowledge.
• Composite - The best of both worlds mixes both standard and static content. Good for someone with limited HTML/CSS/JS knowledge.

Standard

A page designed strictly with widgets, themes and content from the CMS. No HTML widgets or external files are used.

The unroole layout editor has been designed to allow for the majority of content to be entered and managed through the CMS with little to no knowledge of HTML, CSS or JavaScript. Building layouts in the CMS using only content from within the CMS and without adding or modifying the strcuture of the layout through HTML widgets is referred to as standard design. Using a standard design allow for maximum compatibility and reduces the chance of layout rendering error. The standard design approach allows the widgets to generate the HTML/CSS/JS of a layout themselves, whereas the Static Layout Design or Composite Layout Design can corrupt the page with invalid user syntax.

Static

A layout with a number of standard widgets and an HTML widget (highlighted) providing additional functionality through custom JS/CSS and HTML.

The following is the code used in an HTML widget to produce the screenshot above as part of a static design on the 'Tiger eye' 404 page.

A static design of a website functions much like other CMS's and allows a content editor to add any HTML code to a page instead of using the pre-built widgets. This can be useful when designing pages which have dynamic content that does not conform to the rest of the site structure or theme. A simple content markup allows certain types of content to be linked within HTML widgets, Stylesheets, JavaScripts and other text areas to manage the inclusion of content to these static text areas. To read more about this syntax see unroole Content Markup.

In the images to the right we see a simple page with the default top section, a single full sized box and an HTML widget which takes up the space of the box. The HTML that was used to create this static design is shown to the right and includes a sample of the unroole content markup used to display the 'tiger eye' image seen for this layout.

Composite

A layout with a number of standard widgets and an HTML widget (highlighted) providing additional functionality through custom JS/CSS and HTML.

Composite design blends the idea's of Standard Layout Design and Static Layout Design together. It uses a combination of standard pre-made widgets in a layout but then provides additional functionality through targeted HTML widget. Composite designs are good for adding in functionality without having to create a specific widget. This is particularly useful if the functionality only exists in one layout and can be done without an system deployments or updates.