How to Create a Theme in Liferay

Note: at this point, you should already have installed the IntelliJ IDEA, Java, and Node.js/npm.

To start creating a custom theme in Liferay 7, we need to prepare the environment first: set up the IDE and Liferay workspace, and configure the Liferay bundle.

If you’re using the IntelliJ IDEA, install the Liferay IntelliJ Plugin. This will give you the platform’s workspace support, modules, and server support:

Now you can create a new Liferay project using the plugin.

Go to “File -> New -> Project…” and choose “Liferay”:

 

 

This “Liferay” menu is added by Liferay IntelliJ Plugin and lets you create a project as Liferay workspace. Here you can use two options: Gradle or Maven workspace, depending on the build tool you want to use. If you’re not sure, leave Gradle selected, since it’s more frequently used by Liferay developers.

Click “Next” and complete the project creation:

 

 

Set here the project name and location, specify Liferay version and SDK, and click “Finish” to complete the project creation process.

Note: the latest version of the platform may not be available in selection because the current plugin version does not support it yet. However, it’s not a problem: you may select the latest available one, and then change to the version you need in the workspace configuration properties.

At this stage you should already have a Liferay workspace:

 

 

It’s time to make the configuration adjustments: enable the target platform, set the correct version and bundle URL. For example, you need to configure your workspace to use Liferay 7.3. For this, you need to change the version in the .blade.properties file:

liferay.version.default= 7.3

Also adjust the properties in gradle.properties file:

liferay.workspace.target.platform.version= 7.3.0

liferay.workspace.bundle.url= https://releases.liferay.com/portal/7.3.0-ga1/liferay-ce-portal-tomcat-7.3.0-ga1-20200127150653953.tar.gz

Here you enabled the target platform (it will simplify the dependencies management, as dependencies will be taken from the Liferay’s BOM) and set the URL for the bundle (it’s required for Liferay server setup). You can check the list of available releases here: Liferay releases. Choose the version you need, and set the link to the platform’s archive bundled with tomcat.

Now it’s time to set up a Liferay bundle. Run the “initBundle” Gradle task:

 

 

and wait until the bundle is downloaded. You should have a “bundles” directory with the Liferay:

 

 

Now you can set up the Liferay Server. Go to “Run/Debug Configuration” and add a new server pointed to the “bundles” directory:

 

 

Next steps will be to start the platform’s server, open http://localhost:8080 URL where you will see the start Liferay page, after a couple of configuration steps:

 

 

Now that you have the Liferay server with IDE and configured workspace is settled, you can start the theme creation.

Note: before its creation, make sure you already have Node.js and npm installed: (you may also need to upgrade them, if you’re using old versions)

 

 

There are different ways to build a Liferay DXP theme. But modern developers, who specialize in this technology, usually leverage the Theme Generator. You need to install it globally with the npm i -g generator-liferay-theme command:

 

 

And you’ll also need to install Yeoman with npm i -g yo command:

 

 

To create a theme, navigate in terminal to the “themes” directory of the platform’s workspace. Now you can create it with yo liferay-theme command:

 

 

Answer required questions: set theme name and ID, choose Liferay version, and indicate whether to include Font Awesome into the theme. Wait until it is created. At the end, you’ll be asked a couple of additional questions:

 

 

Leave the “Local App Server” strategy, specify the path to tomcat’s directory (inside bundles) as the app server directory, and leave http://localhost:8080 as a development site.

At this point, your theme should already be created, and you may start the Liferay DXP theme development:

 

 

Pay attention to “liferay-theme.json” file. and make sure local paths are defined correctly:

1
2
3
4
5
6
7
8
9
10
11

  {
     "LiferayTheme": {
        "deploymentStrategy": "LocalAppServer"‚
        "appServerPath":  "/home/vitaliy/Work/Projects/liferay/theme-development/bundles/tomcat-9.0.17"‚
        "deployPath": "/home/vitaliy/Work/Projects/liferay/theme-development/bundles/deploy"‚
        "url": "http://localhost:8080"‚
        "appServerPathPlugin": "/home/vitaliy/Work/Projects/liferay/theme-development/bundles/tomcat-9.0.17/webapps/aimprosoft-theme"‚
        "deployed":  false‚
        "pluginName": "aimprosoft-theme"
     }
  }

Note: this file is usually under Git ignore. It’s a common practice to create its copy as liferay-theme.json.bk, and push it into Git, so other developers can rename it and use it for local development.

To build a theme, you need to navigate to its folder in a command line, and install Gulp first:

 

 

Now you should be able to build and deploy it with Gulp: run gulp build command, and then run gulp deploy:

 

 

You’ll see the message indicating that the theme is deployed to the deploy directory. You may check the Liferay logs to make sure that the theme has been deployed:

2020-02-20 11:08:19.074 INFO

[fileinstall-/home/vitaliy/Work/Projects/liferay/theme-development/bundles/osgi/war][BaseAutoDeployListener:50] Themes for /home/vitaliy/Work/Projects/liferay/theme-development/bundles/tomcat-9.0.17/temp/20200220110817363GTRASGOF/aimprosoft-theme.war copied successfully

2020-02-20 11:08:20.724 INFO

[fileinstall-/home/vitaliy/Work/Projects/liferay/theme-development/bundles/osgi/war][ThemeHotDeployListener:108] 1 theme for aimprosoft-theme is available for use

2020-02-20 11:08:20.808 INFO

[fileinstall-/home/vitaliy/Work/Projects/liferay/theme-development/bundles/osgi/war][BundleStartStopLogger:39] STARTED aimprosoft-theme_1.0.0 [1112]

Once the theme is deployed, you may apply it to a portal page. Go to page configuration and click “Define a specific look and feel for this page.” Click “Change Current Theme,” and you’ll see it among the available ones:

 

 

Choose your theme and save the configuration. Check it on the page:

 

 

Of course, it does not look pretty cool so far, because it’s empty based on the platform’s built-in “styled” one. But you can make the theme look smart with the adjustment to its templates and CSS files. Here is the Liferay 7 theme development example: