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. You will notice the clear hierarchy of elements as explained in the Layout Box Model article is generated. You should notice a few conventions that are employed in the markup to make it easier to reference elements or build your own HTML as part of an HTML widget.

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.

Common Classes

Format	Example	Elements	Purpose
ul		Layouts	Indicates the beginning of a layout. If directly after the body, then it can be considered the primary channel layout of the page. If nested deeper than this, it is the content layout of the page.
us		Sections	Used on any section elements.
ub		Boxes	Used on any box elements.
uw		Widgets	Used on any widget elements.
ucl		Channel Layouts	Used on any channel layouts.
up		Pages	Used on any page layouts.
ub_xxxxx	ub_content, ub_box, ub_divider	Boxes	A class used to identify a specific category of boxes such as content, dividers or normal boxes.
uw_xxxx	uw_navigation, uw_html, uw_asset	Widgets	A class used to identify a specific category of widgets for global styling. Every widget type has a unique 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.

Extended Classes

Format	Example	Elements	Purpose
unroole		Layouts	Legacy tag leftover from previous layout versions (don't use).
grid		Layouts	Indicates the beginning of of a new unroole grid.
ub_section		Sections	A simple class indicating a section sub-division.
containers		Sections	The first element inside any section to be used for styling purposes.
inner_box		Boxes	Used within a box for styling purposes.
spacer		Boxes	Used with themes and stylesheets to help add space between boxes.
ub_xxxx	ub_5289, ub_5296	Boxes	Due to the fact the id's of boxes can be changed this class allows for referencing of the system id even if changed.
uw_xxxx	uw_10342, uw_5876	Widgets	Due to the fact the id's of widgets can be changed this class allows for referencing of the system id even if changed.

Common ID's

Format	Example	Elements	Purpose
ulay_xxx	ulay_506	Pages, Channel Layouts	Derived from the id of the page or channel layout containing the layout.
ul_xxx	ul_865	Layouts	A unique identifier for this specific version of the layout. Useful for targeting different revisions of a layout.
ub_0_usl		Sections	A unique identifier indicating the first section of the channel layout on a rendered page.
ub_0_up		Sections	A unique identifier indicating the first section of the page content on a rendered page.
ub_xxxx	ub_5176, my_box, anything_you_want	Boxes	A unique identifier for this box based on the box properties or auto-generated by the system.
uw_xxxx	uw_10342, my_widget, anything_you_want	Widgets	A unique identifier for this widget based on the widget properties or auto-generated by the system.