A Theme provides the overall look and feel for a site. Understanding the page layout is crucial to targeting the correct markup for styling, organizing your content, and creating your site. Once you understand how the page is organized, you can develop your theme.

If you want to design a website, you must have three key components: CSS, JavaScript, and HTML. Liferay Portal provides CSS extensions and patterns out-of-the-box and supports SASS, as well as multiple JavaScript frameworks. The HTML, however, is rendered via FreeMarker theme templates.

Liferay Portal provides several default FreeMarker templates that each handle a key piece of functionality for the page. To help make the development process easier, Liferay Portal also provides several theme template utilities that you can use in your theme templates to include portlets, use taglibs, access theme objects, and more.

There are several mechanisms for customizing and extending themes, from color schemes to reusable pieces of code. Likewise, there are several mechanisms for customizing and extending portlets.

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


Themes let you customize the default look and feel of your site. Liferay Portal provides several mechanisms for customizing, developing, and extending themes. See the Theme Components and Workflow...


Layout Templates

Layout templates define how content can be placed on a page. Liferay Portal includes several default layout templates out-of-the-box that you can use to organize content on your pages: Figure 1:...


Portlets and Themes

The default theme sets the basic look and feel for all your portlets, and, through Portlet Decorators, gives you a way to fine-tune the look of individual portlets with the click of a mouse. But...


Clay CSS and Themes

Lexicon is a design language that provides a common framework for building consistent UIs. Clay, the web implementation of Lexicon, is an extension of Bootstrap’s open source CSS Framework....

0 (0 Stimmen)
Rendering an Asset Zurück