Difference between revisions of "Layout Structure"
m |
|||
Line 41: | Line 41: | ||
| [[Layouts]] | | [[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. | | 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. | ||
+ | |- | ||
+ | | us | ||
+ | | | ||
+ | | [[Sections]] | ||
+ | | Used on any section elements. | ||
|- | |- | ||
| ub | | ub | ||
Line 47: | Line 52: | ||
| Used on any box elements. | | Used on any box elements. | ||
|- | |- | ||
− | | | + | | uw |
| | | | ||
− | | [[ | + | | [[Widgets]] |
− | | Used on any | + | | Used on any widget elements. |
|- | |- | ||
| ucl | | ucl | ||
Line 105: | Line 110: | ||
| [[Boxes]] | | [[Boxes]] | ||
| Used within a box for styling purposes. | | Used within a box for styling purposes. | ||
+ | |- | ||
+ | | 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. | ||
|} | |} | ||
Revision as of 12:29, 10 July 2012
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.
Common Classes
Format | Example | Elements | Purpose |
---|---|---|---|
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. | |
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. |
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. | |
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. |
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_xxx | ub_5176 | Boxes | A unique identifier for this box based on the box properties. |