In this section, you’ll use the Liferay JS Theme Toolkit’s Liferay Theme Generator to generate the theme’s files. You’ll complete these tasks:
- Install the Liferay Theme Generator and its dependencies
- Generate a theme
- Configure the theme to extend the Atlas base theme.
Atlas provides the look of the Classic theme. It builds on the default Clay Base theme and provides additional styles.
Follow these steps to generate and configure the theme:
Install the Theme Generator. Since you’re developing a theme for Liferay DXP 7.2, install v9.x.x if it’s not installed already. Run the command below:
npm install -g email@example.com
Install the Yeoman and gulp dependencies:
npm install -g yo gulp
Generate the starting theme with the Theme Generator. Enter Lunar Resort Theme for the name and lunar-resort for the ID, and answer no for the Font Awesome prompt. This theme uses Clay icons instead:
To develop the theme you must copy the default files from the theme’s build and modify them. The
_custom.scssfile are included by default. Run the command below from the theme’s root folder to build the files:
Create a new
/src/templates/folder and copy
build/templates/folder into it.
Configure the theme to extend the Atlas theme. Add a
clay.scssfile to the theme’s
/src/css/folder and add the import shown below:
_imports.scssfile in the
/src/css/folder and add the imports shown below to it. This includes the default imports and replaces the
clay/base-variableswith the Atlas base variables:
@import "bourbon"; @import "mixins"; @import "compat/mixins"; @import "clay/atlas-variables";
You’ve generated the theme, prepared it for development, and configured it to extend the Atlas theme. Continue to the next section to build the Lunar Resort’s Header and customize the logo.