Liferay DXP 7.1 theme templates are essentially the same as Liferay Portal 7.0 theme templates. Here are the main changes:
- Velocity templates were deprecated in Liferay Portal CE 7.0 and are now removed in favor of FreeMarker templates in Liferay DXP.
Key reasons for using FreeMarker templates and removing Velocity templates are these:
-
FreeMarker is developed and maintained regularly, while Velocity is no longer actively being developed.
-
FreeMarker is faster and supports more sophisticated macros.
-
FreeMarker supports using taglibs directly rather than requiring a method to represent them. You can pass body content to them, parameters, etc.
You should start by addressing the Velocity theme templates. Since Velocity theme templates are no longer supported, you must convert your Velocity theme templates to FreeMarker.
If you’re using the Liferay Theme Generator, the gulp upgrade command reports
the required theme template changes in the log.
For example, here is the gulp upgrade log for the Westeros Bank theme:
----------------------------------------------------------------
Liferay Upgrade (7.0 to 7.1)
----------------------------------------------------------------
Renamed aui.scss to clay.scss
File: footer.ftl
Warning: .container-fluid-1280 has been deprecated. Please use
.container-fluid.container-fluid-max-xl instead.
File: portal_normal.ftl
Warning: .navbar-header has been removed. This container should be
removed in most cases. Please, use your own container if necessary.
The log warns about removed and deprecated code and suggests replacements when applicable. For reference, the main changes appear below:
-
List items inside a container with the
list-inlineclass now require thelist-inline-itemclass. -
The
container-fluid-1280class has been deprecated. Please usecontainer-fluid container-fluid-max-xlinstead. -
Responsive navbar behaviors are now applied to the
navbarclass via the requirednavbar-expand-{breakpoint}class. -
The
navbar-toggleclass is nownavbar-togglerand has different inner markup. -
The
navbar-headerclass has been removed. This container should be removed in most cases. Please, use your own container if necessary.
Next, you’ll learn how to update various theme templates to Liferay DXP 7.1. If you didn’t modify any theme templates, you can skip these sections.
Updating Portal Normal FTL
The first one to update is the portal_normal.ftl theme template. If you didn’t
customize portal_normal.ftl, you can skip this section. Follow the steps below
to update portal_normal.ftl:
-
Open your modified
portal_normal.ftlfile and remove the breadcrumbs:<nav id="breadcrumbs"> <@liferay.breadcrumbs /> </nav> -
Remove
id="main-surface"from thebodytag. This is not needed for SPA to work properly:<body class="${css_class}" id="main-surface">
If you modified the portlet template for your theme, follow the steps in the next section.
Updating Portlet FTL
Follow these steps to update your modified portlet.ftl file:
-
Find the
<a class="icon-monospaced portlet-icon-back text-default" href="${portlet_back_url}" title="<@liferay.language key="return-to-full-page" />">element and add thelist-unstyledclass to it:<a class="icon-monospaced list-unstyled portlet-icon-back text-default" href="${portlet_back_url}" title="<@liferay.language key="return-to-full-page" />" > -
Find the
<div class="autofit-float autofit-row">element and add theportlet-headerclass to it:<div class="autofit-float autofit-row portlet-header">
The portlet template is updated. That covers most, if not all, of the required
theme template changes. If you modified any other FreeMarker theme templates,
you can compare them with templates in the
_unstyled theme.
If your theme uses the Liferay Theme Generator, refer to the suggested changes
that the gulp upgrade task reports.