Do you want to transform the look and feel of your Liferay Portal? Create your own Liferay Theme! Themes are hot deployable modules unique to a site. With themes, you can create whatever user interface you want for your site.

Are you craving more than Liferay’s default layouts for pages? Do you have a special use case, that a default layout template just doesn’t meet? Well, look no further. Create your own Layout Template! Layout templates allow you to set the rows and columns of a page and determine where content can be placed.

In this section of tutorials, you’ll learn how to develop themes, layout templates, and more.

Portlet Decorators

In previous versions of Liferay Portal, administrators could display or hide the application borders through the Show Borders option of the look and feel configuration menu. In Liferay Portal CE...

Read More

Introduction to Themes

A Liferay Theme is the overall look and feel for a site. Themes are a combination of CSS, JavaScript, HTML, and FreeMarker templates. Although the default themes are nice, you may wish to create...

Read More

Liferay Theme Generator

The Liferay Theme Generator is an easy-to-use command-line wizard that streamlines the theme creation process. It is independent of the Liferay Plugins SDK, and generates themes for Liferay Portal...

Read More

Layout Templates with the Liferay Theme Generator

Layout Templates specify how content is arranged on your site pages in Liferay Portal. For example, take a look at the 1-2-1 Columns Layout CE layout shown below: Figure 1: The 1-2-1 Columns Layout...

Read More

Creating Layout Templates Manually

You can use the Liferay Theme Generator to generate Layout Templates automatically. This is covered in the Layout Templates with the Liferay Theme Generator tutorial. You may, however, want to...

Read More


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...

Read More

Importing Resources with a Theme

A theme without content is like an empty house. If you’re trying to sell an empty house, it may be difficult for prospective buyers to see its full beauty. However, staging the house with some...

Read More

Embedding Portlets in Themes and Layout Templates

One thing developers often want to do is embed a portlet in a theme or layout template. This makes the portlet visible on all pages where the theme/layout is used. In the past, this was only...

Read More

Using Developer Mode with Themes

Do you want to develop Liferay themes without having to redeploy to see your portal modifications? Use Liferay Developer Mode! In Developer Mode, all caches are removed, so any changes you make are...

Read More

Theme Contributors

If you want to package UI resources independent of a specific theme and include them on a Liferay Portal page, Theme Contributors are your best option. If, instead, you’d like to include separate...

Read More

Context Contributors

JSP templates are the predominant templating framework in Liferay Portal. Themes, application display templates (ADTs), DDM templates, and more make use of JSPs as a templating engine. JSPs,...

Read More

Theming Portlets

Liferay Portal themes can provide additional styles to a portlet. You can change the markup for the portlet containers by modifying the portlet.ftl file. This tutorial demonstrates how to style...

Read More

Importing Lexicon CSS into a Theme

Lexicon is an extension of Bootstrap’s CSS Framework. Bootstrap is by far the most popular CSS framework on the web. Also, it’s open source, so anyone can use it. Built with Sass, Lexicon fills the...

Read More


Macros let you assign theme template fragments to a variable. This keeps your theme templates from becoming cluttered and makes them easier to read. Note that Velocity templates are supported, but...

Read More

Theme Builder

Liferay’s Theme Builder gives developers who aren’t using Liferay’s Theme Generator (e.g., Gradle or Maven) a way to compile and build a theme WAR file. To use the Theme Builder, you must apply it...

Read More
0 (0 Votes)
Creating Form Navigator Contexts Previous