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 DXP 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 DXP provides several default FreeMarker templates that each handle a key piece of functionality for the page. To help make the development process easier, Liferay DXP 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.