Upgrading Layout Templates

Layout templates for Liferay DXP 7.0 differ slightly from layout templates for Liferay Portal 6. The layout template’s rows and columns are affected by Bootstrap’s new grid system syntax.

This tutorial demonstrates the following:

• How to upgrade your layout template to Liferay DXP 7.0

Upgrading a layout template involves updating its Liferay version and updating the class syntax for its rows and columns.

Follow these steps to upgrade your layout template:

1. Open your liferay-plugin-package.properties file and update the liferay-versions property to 7.0.0+:

   liferay-versions=7.0.0+
   

2. Open your layout template’s .tpl file and replace row-fluid with row, in each row’s class value.

3. Previously, column size was denoted using a class value of format span[number]. The new Bootstrap grid system uses the format col-[device-size]-[number].

   The [device-size] value must be xs, sm, md, or lg. In most cases, an md device size works well. You can read more about the Bootstrap grid system on their site at https://getbootstrap.com/docs/3.3/css/#grid.

   The [number] value must be an integer from 1 to 12. A row’s width is divisible by twelve; so the combined width of a row’s columns must equal 12.

   Inside the .tpl file, replace each span-[number] class value with col-[device-size]-[number], where [device-size] is xs, sm, md, or lg and [number] is an integeter from 1 to 12.

   Here’s an example column that uses the md device size and a column that is a third (4/12) of the row’s total width:

   <div class="portlet-column portlet-column-last col-md-4" id="column-3">
   

As an example, here’s Liferay Portal 6 layout template [1_2_1_columns.tpl](https://github.com/liferay/liferay-portal/blob/Portal 6.2.x/portal-web/docroot/layouttpl/custom/1_2_1_columns.tpl) upgraded to Liferay DXP 7.0:

<div class="columns-1-2-1" id="main-content" role="main">
        <div class="portlet-layout row">
                <div class="col-md-12 portlet-column portlet-column-only" 
                id="column-1">
                        $processor.processColumn("column-1", 
                        "portlet-column-content portlet-column-content-only")
                </div>
        </div>

        <div class="portlet-layout row">
                <div class="col-md-6 portlet-column portlet-column-first" 
                id="column-2">
                        $processor.processColumn("column-2", 
                        "portlet-column-content portlet-column-content-first")
                </div>

                <div class="col-md-6 portlet-column portlet-column-last" 
                id="column-3">
                        $processor.processColumn("column-3", 
                        "portlet-column-content portlet-column-content-last")
                </div>
        </div>

        <div class="portlet-layout row">
                <div class="col-md-12 portlet-column portlet-column-only" 
                id="column-4">
                        $processor.processColumn("column-4", 
                        "portlet-column-content portlet-column-content-only")
                </div>
        </div>
</div>

Your layout template is ready to use in Liferay DXP 7.0!

Related Topics

Planning Plugin Upgrades and Optimizations

Benefits of Liferay DXP 7.0 for Liferay Portal 6 Developers

Liferay Upgrade Planner