Upgrading Your Theme from Liferay Portal 6.2 to 7.1

This section guides you through the process of upgrading your 6.2 theme to run on Liferay Portal CE 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.

finished-7-1-theme.png

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 Portal CE 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 Portal’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.

Running the Gulp Upgrade Task for 6.2 Themes

You can upgrade Liferay Portal 6.2 theme Liferay Portal CE 7.1, regardless of the development environment (Plugins SDK, Maven, etc.) you used. If you migrate your theme to use the Liferay JS Theme...

Read More

Updating 6.2 Project Metadata

If your theme uses the Liferay JS Theme Toolkit, the Gulp upgrade task automatically updates some of your theme’s metadata as part of the upgrade process. Follow the steps below to update your...

Read More

Updating 6.2 Theme Templates

Liferay Portal CE 7.1 theme templates are essentially the same as Liferay Portal 6.2 theme templates. Here are the main changes: Velocity templates were deprecated in Liferay Portal CE 7.0 and are...

Read More

Updating the Resources Importer

The Resources Importer is now an OSGi module in Liferay’s Web Experience application suite. Since the suite is bundled with Liferay Portal, you don’t have to download the Resources Importer...

Read More

Applying Clay Design Patterns

Liferay Portal CE 7.1 uses Clay, a web implementation of Liferay’s Lexicon Experience Language. The Lexicon Experience Language provides styling guidelines and best practices for application UIs....

Read More

Updating 6.2 CSS Code

Liferay Portal CE 7.1’s UI improvements required these CSS-related changes: Renaming CSS files Removing unneeded CSS files Updating CSS rules and imports Modifications to CSS responsiveness tokens...

Read More
0 (0 Votes)
Archiving Site Resources Previous