Layout Structure

For more information, see Layouts.

A simple example page to illustrate the structure of an unroole layout.

The first bit of html produced for the page displayed above.

Whether or not you are designing a Theme or adding stylesheet or javascript elements to a channel it is useful to know the structure and markup of the HTML code generated by a layout. This code is the same for every layout in the system whether it is generated from a page or channel layout.

On the right are two screeenshots which illustrate a fully formed page and the first part of the generated HTML code for that page. The rendered HTML markup gives many different areas for you to reference when digging deep into the HTML/CSS/JS of a layout.

If you are working directly with the DOM it is useful to know which classes and id's are automatically generated by the system for use by theme builders or through stylesheets. The table below lists the various attributes, what element they are included in and their purpose.

Type Attribute	Format	Example	Elements	Purpose
id	ulay_xxx	ulay_506	Pages, Channel Layouts	Derived from the id of the page or channel layout containing the layout.
id	ul_xxx	ul_865	Layouts	A unique identifier for this specific version of the layout. Useful for targeting different revisions of a layout.
class	ul		Layouts	Indicates the beginning of a layout. If directly after the body then can be considered the primary channel layout of page. If nested deeper than this is the content layout of the page.
class	grid		Layouts	Indicates the beginning of of a new unroole grid.
id	ub_0_usl		Sections	A unique identifier indicating the first section of the channel layout on a rendered page.
id	ub_0_up		Sections	A unique identifier indicating the first section of the page content on a rendered page.
class	ub_section		Sections	A simple class indicating a section sub-division.
class	containers		Sections	The first element inside any section to be used for styling purposes.
id	ub_xxx	ub_5176	Boxes	A unique identifier for this box based on the box properties.
class	ub		Boxes	Used on any box elements.
class	ub_xxxxx	ub_content, ub_box, ub_divider	Boxes	A class used to identify a specific class of boxes such as content, dividers or normal boxes.
class	inner_box		Boxes	Used within a box for styling purposes.
class	grid_x_xx	grid_0_25, grid_1_0, grid_0_10	Boxes	Used for styling purposes to indicate the type of column width that this box takes up as part of the page. Everything is done in 3 digit rounded percentages. ex: 0_25 = 25% of layout width, 1_0 = 100% of layout width, 0_10 = 10% of layout width. Note that this may not apply if the number of column of a layout is changed without changing the box width.