Liferay Theme Builder Wizard

About the Liferay Theme Builder Wizard

Starting a Liferay theme means assembling a precise folder structure and several interlocking config files before the first build. This wizard walks you through layout, colors and typography, then generates a ready-to-build Liferay 7.4 / DXP project you download as a single ZIP. Choose a classic theme WAR or a Theme CSS client extension.

Classic theme (WAR)

• package.json and gulpfile.js for the standard gulp + liferay-theme-tasks build, extending the styled base theme.
• src/css/_clay_variables.scss: Clay/Bootstrap variable overrides from your color and type choices.
• src/css/_custom.scss: header, navigation and footer styling.
• src/templates/portal_normal.ftl, navigation.ftl and init_custom.ftl.
• src/WEB-INF/liferay-look-and-feel.xml (7.4.0 DTD) and liferay-plugin-package.properties.

Theme CSS client extension

• client-extension.yaml with a themeCSS extension pointing at the built clay.css and main.css.
• package.json with liferayDesignPack.baseTheme set to styled.
• The same _clay_variables.scss and _custom.scss, so your colors and fonts carry over.

How to use

1. Name your theme and pick classic theme or Theme CSS client extension.
2. Step through layout, colors and typography, previewing any file on the right as you go.
3. On the Review step, download the ZIP.
4. Classic theme: run npm install, npm run init and npm run deploy, then choose it under Site Builder → Pages → Configuration → Look and Feel. Client extension: put it in your Workspace's client-extensions/ folder and run ../../gradlew clean deploy.

Frequently Asked Questions

Should I build a classic theme or a Theme CSS client extension?

Use a Theme CSS client extension when you only need to change colors, fonts and CSS: it deploys from a Liferay Workspace and Liferay recommends client extensions on 7.4+. Build a classic theme when you need your own page markup in portal_normal.ftl, such as a custom header, sidebar navigation or footer.

How do I build and deploy the classic theme?

Unzip it and run npm install, then npm run init once to point it at your bundle, then npm run deploy. npm run build alone puts the WAR in dist/, which you can copy into the deploy folder of your Liferay installation. The project uses the same gulp + liferay-theme-tasks setup that the official theme generator creates.

How do I deploy the Theme CSS client extension?

Copy the folder into client-extensions/ of a Liferay Workspace and run ../../gradlew clean deploy from it. Then select it under Site Builder > Pages > Configuration > Theme CSS Client Extension.

Which Liferay versions does it support?

Liferay Portal 7.4 and Liferay DXP, including the quarterly releases. Both outputs extend the styled base theme and override Clay through _clay_variables.scss.

Can I change the theme after downloading it?

Yes. Everything is plain source: SCSS in src/css, FreeMarker templates in src/templates and settings in liferay-look-and-feel.xml. Run npm run watch while you edit to rebuild and reload automatically.

Official Resources

• Using a Theme CSS Client Extension (Liferay Learn)
• liferay-theme-tasks on npm