Layout Structure
Whether or not you are designing a Theme or adding stylesheet or JavaScriptsjavascript 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 | Section | A unique identifier indicating the first section of the channel layout on a rendered page. | |
id | ub_0_up | Section | A unique identifier indicating the first section of the page content on a rendered page. | |
class | ub_section | Section | 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. |