Liferay Theme Builder Wizard

Guided wizard to scaffold a complete Liferay 7.4/DXP theme — layout, colors, typography — exported as a ready-to-build ZIP with SCSS, FTL templates, and a @liferay/cli package.json.

Theme

Theme Name

Theme ID / folder: my-theme · Target: Liferay 7.4 / DXP · Build: @liferay/cli

Generated files (11)

package.json

{
  "name": "my-theme",
  "version": "1.0.0",
  "description": "My Theme",
  "main": "package.json",
  "keywords": [
    "liferay-theme"
  ],
  "license": "MIT",
  "scripts": {
    "build": "liferay build",
    "deploy": "liferay deploy",
    "kickstart": "liferay kickstart",
    "watch": "liferay watch"
  },
  "devDependencies": {
    "@liferay/cli": "^1.0.0"
  },
  "liferayTheme": {
    "baseTheme": "styled",
    "rubricColor": "#2563eb",
    "screenshot": "",
    "templateLanguage": "ftl",
    "version": "7.4"
  }
}

About the Liferay Theme Builder Wizard

Spinning up a new Liferay theme means assembling a precise folder structure and a handful of interlocking config files before you can even run a build. This wizard walks you through the key decisions — layout, color system, and typography — and generates a complete, ready-to-build Liferay 7.4 / DXP theme that you can download as a single ZIP and deploy with @liferay/cli.

What it generates

package.json wired for the @liferay/cli build (build / deploy / watch).
src/css/_clay_variables.scss — Clay/Bootstrap variable overrides driven by your color & type choices.
src/css/_custom.scss — custom 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.
src/js/main.js, a README.md with build steps, and a .gitignore.

How to use

Name your theme, then step through layout, colors and typography.
Preview any generated file in the right-hand panel as you go.
On the Review step, download {theme-id}.zip.
Unzip and run npm install && npm run build, then npm run deploy to your Liferay 7.4 bundle.

Note: the generated @liferay/cli dependency version is a sensible starting point — verify it against the toolkit release that matches your Liferay 7.4 environment before building.