Themelets are small, extendable, and reusable pieces of code. Whereas themes require multiple components, a themelet only requires the files you wish to extend. This creates a more modular approach to theme design, that lends itself well to collaboration, and reduces the need for duplicated code in your theme.
If there is something you find yourself coding over and over again for themes, it’s a good candidate for a themelet.
This tutorial demonstrates how to:
Create a themelet to extend your theme
Install a Themelet
To create a themelet, you need a theme to extend and the Liferay Theme Generator and dependencies installed, as explained in the Liferay Theme Generator tutorial.
Creating a Themelet
Follow these steps to create a themelet:
Open the Command Line and navigate to the directory you want to create your themelet in.
yo liferay-theme:themeletand follow the prompts to generate the themelet.
The generated themelet contains a
package.jsonfile with configuration information and a
src/cssfolder that contains a
_custom.scssfile. Just like a theme, add your CSS changes to the
To use your themelet, you must install it globally first. This makes the themelet visible to the generator. To install your themelet globally, navigate into its root folder and run
npm link. Note, you may need to run the command using
sudo npm link. This creates a globally-installed symbolic link for the themelet in your npm packages folder. Now your themelet is available to install in your themes.
Now that your themelet is developed, you can install it in your theme.
Installing a Themelet
After you’ve developed your themelet, follow the steps below to install it into your theme.
Navigate to your theme’s root directory and run the following command:
Choose Themelet as the theme asset to extend.
Select Search globally installed npm modules.
Highlight your themelet, press spacebar to activate it, and press Enter to install it.
gulp deployto build and deploy your theme with the new themelet updates.
Your themelet is installed! As you can see, themelets are a handy tool to add to your theme development bag o’ tricks.