liferay-7 Themelet

Themelets are small, extendable, and reusable pieces of code. They help to avoid duplication of code. Code that can be reused in other themes can be written in themelet which can be extended to any theme. Unlike Theme in Themelets we will be including only the files in which there are code changes.

 

Here i have lr-7-theme which looks like below

I will be creating a themelet using Theme-generator to modify the look and feel of the theme.

In command prompt navigate to your workspace or wherever you want your generated themelet to be and enter  yo liferay-theme:themelet

 

Theme generator would ask for Themelet name, Themelet id, version enter the values respectively.(Refer attachment below)

The generated themelet contains a package.json file with configuraion information and a src/css directory that contains a _custom.scss file. Just like a theme, all the updated files go into the src directory.

 

Themelet needs to be installed globally so that it can be recognized by generator.

Navigate to the themelet directory which got created and run the command npm link

This creates a globally-installed symbolic link for the themelet in your npm packages directory.

 

Add the required css to the created themelet to

lr-7-themelet\src\css\_custom.scss and save the file.

 

Navigate to your theme directory, to which this themelet has to be extended and execute the command: 

gulp extend

 

Follow the prompts

 

 

 

Select the themelet you want to extend

lr-7-theme is now extended to lr-7-themelet.

Deploy the theme using command gulp deploy

Below is the changed look & feel of the page