This section guides you through the process of upgrading your 6.2 theme to run on Liferay DXP 7.1. While you’re at it, you should leverage theme improvements, including support for Sass, Bootstrap 4 and Lexicon 2.0.
Theme upgrades involve these steps:
- Updating project metadata
- Updating CSS
- Updating theme templates
- Updating resources importer configuration and content
- Applying Clay design patterns
As an example, these tutorials apply the steps to a theme called the Lunar
Resort theme developed in the Liferay Portal 6.2
Developing a Liferay Theme
Learning Path. It’s similar to many Liferay Portal 6.2 themes, as it extends the
_styled
theme,
adds configurable settings, and incorporats a responsive design that leverages
Font Awesome icons and Bootstrap. The theme
ZIP file contains its
original source code.
Figure 1: The Lunar Resort example theme upgraded in this tutorial uses a clean, minimal design.
Before upgrading a theme, consider
migrating the theme
to use the
Liferay JS Theme Toolkit.
Liferay DXP 7.1 doesn’t require this migration, but the Liferay JS Theme Toolkit’s
Gulp upgrade task automates many upgrade steps. Themes that use the Liferay JS
Theme Toolkit can also leverage exclusive features, such as
Themelets.
If your theme uses Bootstrap 3 and Lexicon CSS, you can still use Bootstrap 3 and Lexicon CSS alongside Bootstrap 4 and Clay CSS markup, thanks to Liferay DXP’s compatibility layer.
Follow the steps in the
Running the 6.2 theme upgrade task
tutorial to learn how to migrate your theme to use the Liferay JS Theme Toolkit,
including its Gulp upgrade task. Otherwise, you must follow the steps in the
remaining tutorials in this section to upgrade your 6.2 theme to 7.1 manually.