Introduction to Developing a Liferay Theme

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!

« Creating Your JSF Application's User InterfaceSetting up the Theme »