As a developer, you want your site to communicate your ideas clearly and effectively. You don’t want the design of your site to inhibit users from interacting with your content. This is where themes come into play. Themes allow you to take creative control and tell the story you want to tell with your site. They give you control over the look and feel of your site, down to the tiniest detail.

As you approach the theme’s design, keep in mind the target audience, the message you are trying to communicate, and the site’s purpose. The theme’s design helps answer these questions.

This Learning Path takes you through developing a theme for Liferay’s Lunar Resort using the Freemarker template language. You’ll learn how to style your theme with CSS, how to make it responsive for mobile devices, how to leverage Bootstrap’s and Font Awesome’s icons in your theme, and how to implement configurable theme settings.

Before you start, make sure you have a Liferay development environment installed. You can learn how to install Liferay IDE or Liferay Developer Studio in the Beginning Liferay Development Learning Path. You can use other tools for development, but Liferay’s development tools are the most natural to use, since they’re designed for Liferay. Because you’ll be deploying a lot of changes throughout this Learning Path, make sure you also have developer mode enabled in your Portal. You can learn how to enable developer mode for your Portal in the Using Developer Mode with Themes tutorial.

It’s time to get started!

Setting up the Theme

In this portion of the Learning Path, you’ll create the foundation for the Lunar Resort theme. You’ll learn the proper workflow and directory structure needed to create a theme. Finally, you’ll...

Read More

Importing Resources for Your Theme

You’ve created the theme for the Lunar Resort, but it’s looking pretty empty at the moment. You need some default content to go with it, so it looks nice when it’s first installed. There are a...

Read More

Styling Your Theme with CSS

Previously, you built the framework for the theme and imported the content for the Lunar Resort. The end result may have seemed a little underwhelming. All your work left you with what appeared to...

Read More

Leveraging Bootstrap and Font Awesome Icons in Your Theme

The puzzle pieces are falling into place. You’ve built the theme, imported resources, and customized the look and feel of it with CSS. Now you’ll learn how to use the icons that come bundled with...

Read More

Making Configurable Theme Settings

Theme settings allow you to give Administrators control over the elements of the page without having to touch any of the code directly. Theme settings can then be modified on a site-wide or a page...

Read More

Making Your Theme Responsive

Designing a theme is a challenging process, especially when you take responsiveness into consideration. How will your theme look on a desktop computer? How will it look on a phone or a tablet?...

Read More


Congratulations! You’ve learned how to build a theme from start to finish. So what’s next? Now that you’ve created a theme, you can publish it to Liferay’s Marketplace for others to download. You...

Read More
+1 (1 Vote)
Adding a JSF Portlet to the Control Panel Previous