Themelets are small, extendable, and reusable pieces of code. Whereas themes require multiple components, a themelet only requires the files you wish to extend. This creates a more modular approach to theme design, that lends itself well to collaboration, and reduces the need for duplicated code in your theme.

Themelets let developers easily share code snippets across their themes with other developers. A themelet can consist of CSS and JavaScript. Themelets do not support theme templates.

Themelets are very flexible, and therefore they have a number of possible uses. You can make a themelet to modify the appearance of Liferay Portal CE 7.0 admin tools, or a themelet that uses a custom JavaScript component for responsive embedded videos. For example, take a look at the Liferay Product Menu Animation Themelet. This themelet simply alters the animation for Liferay’s Product Menu.

product-menu-animation-themelet.png

Figure 1: Themelets can be used to modify one aspect of the UI, that you can then reuse in your other themes.

If there is something you find yourself coding over and over again for themes, it’s a good candidate for a themelet.

This tutorial demonstrates how to:

  • Create a themelet to extend your theme

  • Install a Themelet

To create a themelet, you need a theme to extend and the Liferay Theme Generator and dependencies installed, as explained in the Liferay Theme Generator tutorial.

Creating a Themelet

Follow these steps to create a themelet:

  1. Open the Command Line and navigate to the directory you want to create your themelet in.

  2. Run yo liferay-theme:themelet and follow the prompts to generate the themelet.

    themelet-prompt.png

    Figure 2: The Themelet sub-generator automates the themelet creation process, making it quick and easy.

  3. The generated themelet contains a package.json file with configuration information and a src/css folder that contains a _custom.scss file. Just like a theme, add your CSS changes to the src/css folder, and add your JavaScript changes to the src/js folder.

  4. To use your themelet, you must install it globally first. This makes the themelet visible to the generator. To install your themelet globally, navigate into its root folder and run npm link. Note, you may need to run the command using sudo npm link. This creates a globally-installed symbolic link for the themelet in your npm packages folder. Now your themelet is available to install in your themes.

Now that your themelet is developed, you can install it in your theme.

Installing a Themelet

After you’ve developed your themelet, follow the steps below to install it into your theme.

  1. Navigate to your theme’s root directory and run the following command:

    gulp extend
    
  2. Choose Themelet as the theme asset to extend.

  3. Select Search globally installed npm modules.

    install-themelet.png

    Figure 3: You can extend your theme using globally installed npm modules or published npm modules.

  4. Highlight your themelet, press spacebar to activate it, and press Enter to install it.

  5. Run gulp deploy to build and deploy your theme with the new themelet updates.

Your themelet is installed! As you can see, themelets are a handy tool to add to your theme development bag o’ tricks.

Related Topics

Importing Resources with Your Themes

Liferay Theme Generator

0 (2 Votes)
Liferay Theme Generator Previous