Theming in Liferay: An introduction to Liferay themes, and how to create a simple theme.

Developing a theme in Liferay is a critical component in crafting a unique digital experience. This comprehensive guide will walk you through the process of Liferay theme development using Yeoman, covering installation on various operating systems, and delving into each step of theme creation and customization.

Don’t miss our Liferay installation guide.

Introduction to Yeoman in Liferay Theme Development

What is Yeoman?

Yeoman is a robust, open-source scaffolding tool used in web application development. It assists developers in quickly setting up new projects, such as Liferay themes, by providing a basic structure and set-up, which can then be customized according to specific needs.

The Role of Yeoman in Liferay Themes

Using Yeoman for Liferay theme development streamlines the process, providing a standardized project structure. This standardization is crucial for maintaining consistency and efficiency in your development workflow.

Prerequisites for Liferay Theme Development

To start with Liferay theme development, you need to set up your environment. Here’s what you need:

• Node.js and npm: Node.js is a runtime environment for executing JavaScript code outside a browser. npm (Node Package Manager) is used for managing JavaScript packages.
• Yeoman and the Liferay Theme Generator: Yeoman helps scaffold your project, while the Liferay Theme Generator sets up the specific structure for a Liferay theme.

Installing Node.js and npm

Windows

1. Download the Installer: Visit the official Node.js website and download the Windows installer.
2. Run the Installer: Follow the installation prompts, ensuring that npm is included and added to your PATH.

macOS

1. Use Homebrew: If you have Homebrew installed, simply run brew install node.
2. Manual Installation: Alternatively, download the macOS installer from the Node.js website and follow the instructions.

Linux

1. Use a Package Manager: For most Linux distributions, Node.js can be installed from the package repository. For Ubuntu, for instance, you can use these commands:

   sudo apt update
   sudo apt install nodejs npm

2. Verify Installation: Run node -v and npm -v to confirm the installation of Node.js and npm.

Installing Yeoman and the Liferay Theme Generator

With Node.js and npm installed, the next step is to install Yeoman and the Liferay Theme Generator globally using npm. This can be done across all operating systems using the same command:

npm install -g yo generator-liferay-theme

Creating a Theme with Yeoman

Step 1: Scaffold a New Liferay Theme

Initialization

Start by scaffolding a new Liferay theme project. Open your command line tool and navigate to your workspace. Run:

yo liferay-theme

Configuration

The generator will prompt you to provide several pieces of information:

• Theme Name and ID: Choose a unique name and ID for your theme.
• Liferay Version: Ensure that this matches the version of your Liferay DXP instance.
• Template Language: Choose between available template languages, like Freemarker or Velocity.

Step 2: Customizing the Theme

Once the scaffolding is complete, you’ll have a basic theme structure.

Style Customization

Navigate to the src/css folder in your theme directory. Here, you can modify the SCSS files to change the styling, such as colors, fonts, and layout.

Example customization in _custom.scss:

body {
  background-color: #f2f2f2;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

Layout Templates

Edit the template files (Freemarker or Velocity) located in the src/templates directory to alter the structure and layout of your theme.

Example modification in a template file:

<nav class="user-navigation">
  <!-- Custom navigation layout -->
</nav>

JavaScript for Interactivity

Place any custom JavaScript files in the src/js folder to add interactive elements or functionality to your theme.

Step 3: Building and Deploying the Theme

After customization, it’s time to build and deploy your theme.

Building the Theme

Run the following command in your theme directory:

gulp build

This compiles your theme and generates a .war file in the dist folder, ready for deployment.

Deploying to Liferay

Copy the .war file from the dist folder to the deploy directory of your Liferay instance.

Step 4: Applying Your Custom Theme

Finally, apply your new theme to a Liferay site:

1. Log into Liferay DXP: As an administrator, access the Control Panel.
2. Site Settings: In your site’s settings, navigate to the ‘Look and Feel’ section.
3. Choose Your Theme: Select your new theme from the list and apply it.

Best Practices for Liferay Theme Development

• Responsive Design: Ensure your themes adapt to different screen sizes and devices.
• Performance Optimization: Use optimized images and minimize the use of large scripts.
• Regular Updates: Keep your themes up-to-date with the latest Liferay DXP releases.
• Accessibility Compliance: Design your themes to be inclusive and accessible.

Conclusion

Yeoman greatly simplifies the Liferay theme development process, enabling you to create unique, engaging, and professional user interfaces. By following these detailed steps, you can efficiently develop a custom theme that enhances your Liferay site’s aesthetic and functional appeal.

Embark on your journey of Liferay theme development with confidence, knowing you have the tools and knowledge to create exceptional digital experiences.