Creating Layout Templates Manually

Although you can generate layout templates with the Liferay Theme Generator,
you may prefer to create or modify them manually using your own tools. In this tutorial you’ll learn the anatomy of Liferay DXP’s layout templates so you can create layout templates manually or modify existing ones.

Understanding the Anatomy

Layout templates are made of rows and columns. The design you create specifies where users can place portlets on the page. An example row’s HTML markup is shown below:

<div class="portlet-layout row">
        <div class="col-md-4 col-sm-6 portlet-column portlet-column-first" 
        id="column-1">
                ${processor.processColumn("column-1", 
                "portlet-column-content portlet-column-content-first")}
        </div>
        <div class="col-md-8 col-sm-6 portlet-column portlet-column-last" 
        id="column-2">
                ${processor.processColumn("column-2", 
                "portlet-column-content portlet-column-content-last")}
        </div>
</div>

Each row has a div, with the classes portlet-layout and row, that contains child divs for each column. Each column is indicated with the class portlet-column, as well as a class that specifies whether it is the first (portlet-column-first), last (portlet-column-last), or only column in the row (portlet-column-only).

Columns use the Bootstrap grid system and can therefore range in width from 1 to 12. Sizes are indicated with the number that follows the col-[breakpoint] class prefix (e.g. col-md-6). These specify two things: the percentage based width of the element and the media query breakpoint (xs, sm, md, or lg) for when this element expands to 100% width. 12 is the maximum amount, so col-md-6 indicates 6/12 width, or 50%. These classes can also be mixed to achieve more advanced layouts, as shown above. In the example, medium sized viewports display column-1 at 33.33% width and column-2 at 66.66% width, but on small sized view ports both column-1 and column-2 are 50% width.

The processor (${processor.processColumn()}) processes each column’s content, taking two arguments: the column’s id, and the classes portlet-column-content and portlet-column-content-[case] (if applicable), where [case] refers to the first, last, or only column in the row.

Now that you understand a layout template’s anatomy, you can write your own Liferay DXP layout templates!

Layout Templates with the Liferay Theme Generator

Creating Themes

Creating Custom Layout Template Thumbnail Previews

Was this article helpful?
0 out of 0 found this helpful