Theme · AMP
Themelet Development and Modular Styling in Liferay DXP
Build modular layouts using Liferay Themelets. Compile a light package containing custom SASS and assets, publish it via npm, and register it in your main theme's configurations, allowing multiple themes to inherit styling rules with zero duplication.
Creating a Custom Themelet
To create a themelet, initialize it via the Liferay JS Theme Toolkit. Themelets contain only the custom changes you want to apply, such as corporate color tokens and typography files. This separation keeps the base portal code clean and easy to upgrade.
# Initializing themelet using npm
npm install -g liferay-theme-tasks
yo liferay-theme:themelet
Integrating Themelets into Themes
Install the themelet as a dependency in your theme's package.json file. Running the gulp build
command merges themelet files into your main theme. This allows global brands to share typography and color blocks
across multiple business lines, maintaining design consistency.
Styling for Clay Guidelines
Clay is Liferay's implementation of Lexicon design guidelines. Ensure your custom themelet maps styles to Clay
variables (like $body-bg, $primary, and $font-family-base). This allows
standard Clay UI elements (like alerts, buttons, and navigation widgets) to style themselves automatically.
Frequently asked questions
What is the difference between a theme and a themelet?
A theme controls the entire portal wrapper (headers, footers, templates). A themelet is a small module containing styling overrides (like color schemes or font packs) that can be imported by any theme.
Is gulp used for DXP 7.4 theme builds?
Yes. Liferay DXP uses node-gulp build tools to compile SASS files and package resources into deployable war archives.
Read the full article, with table of contents, comparison table, and author bio →