Our documentation has been relocated here, the Liferay Developer Network. Please update your bookmarks!

Themes and Layout Templates

Do you want to transform the look and feel of your Liferay Portal? Create your own Liferay Theme! Themes are hot deployable plugins unique to a site. With themes, you can create whatever user interface you want for your site. In this section of tutorials, you’ll learn how to develop themes.

Layout Templates define how portlets are arranged on a page. These are CSS-based containers where portlets live in the body of the page. Liferay Portal comes with several built-in layout templates, but if you require a more complex page layout, you’ll want to create your own custom layout templates. You’ll learn how to develop layout templates in these tutorials too.

Creating a Theme Project in the Plugins SDK

You can create themes in a Plugins SDK project or a Liferay Maven project. You can create either type of project from Liferay IDE/Developer Studio or from the command line. This tutorial focuses on...

Read More

Setting a Base Theme

Liferay’s themes are built on top of two base themes, named _unstyled and _styled. If you have another theme that you’re rather base yours on, you can do that by setting the theme of your choice as...

Read More

Using Developer Mode with Themes

Do you want to develop Liferay resources 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...

Read More

Creating a Theme Thumbnail

Have you associated a thumbnail image with your theme? In the Look and Feel settings of your site pages in the Site Administration screen, notice that each available theme has a thumbnail image....

Read More

Making Themes Configurable with Settings

You can define settings to make your theme configurable for site administrators. You can add a simple text field input setting, which is the default setting type, or add other types of settings,...

Read More

Specifying Color Schemes

You can provide various “flavors” of your theme by creating color schemes for it. Color schemes let you keep the styles and overall design for your theme, while at the same time giving a new look...

Read More

Using Image Sprites

You might already know that every image on a site generates an HTTP request. Page load time is impacted every time the browser has to negotiate another HTTP request. The more image files a page...

Read More

Leveraging Portal Predefined Settings in Your Theme

The portal defines some settings that allow the theme to determine certain behaviors. As of this writing, predefined settings are only available for portlet borders, bullet styles, and the site...

Read More

Understanding Your Theme’s JavaScript Callbacks in main.js

Liferay has a product called AlloyUI, which is an extension to Yahoo’s YUI3 framework. Liferay Portal by default uses AlloyUI for its JavaScript framework, so you can take advantage of AlloyUI or...

Read More

Creating a Layout Template Project in the Plugins SDK

Are there times when you find yourself limited by Liferay’s page layout options? Maybe your Feng Shui (pronounced fung SHWAY) senses are picking up on some negative energy? Or perhaps you find...

Read More

Designing a Layout Template

Initially, the layout template’s generated TPL files are empty, a fresh canvas on which you can design a page layout template. If this seems overwhelming, don’t worry. By the end of this tutorial,...

Read More

Variables Available to Layout Templates

A number of variables are available for you to use in your custom TPL files. For your convenience, they’re all listed in the table below. Variable Type Description $processor...

Read More

Embedding Portlets in a Layout Template

Are there portlets you need displayed in the same location on your pages that use the same layout template? Or perhaps you want to prevent users from moving portlets you’ve carefully placed,...

Read More
0 (0 Votes)
Using the Gadget Editor Previous