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 your own custom look and feel for your site. Liferay Portal provides several tools and environments that you can use to create themes:

What if you only wish to make a minor change to the overall look and feel? Let’s say you just want to change a menu animation. Instead of creating an entire theme for this single modification, you can create a Themelet. Themelets are modular, customizable, reusable, shareable pieces of code that extend a theme. They enable reusable code for themes. Instead of rewriting the code each time, you can use the same themelet in each theme.

Liferay has its own set of base themes, called styled and unstyled that create the default look and feel you see at first start. The styled theme inherits from the unstyled theme, and simply adds some additional styling on top. These same base themes are used to create a custom theme. See the User Profile Theme, which uses the styled theme as its base. Using a base theme as your foundation, you can then make your customizations to the theme files. To modify the theme, mirror the folder structure of the files you wish to change and copy them into your theme. Place the modified files in the src folder of your theme if using the Liferay Theme Generator, or copy them into the webapp folder of your theme if using Liferay IDE. Build the theme to apply the changes.

Once your theme is developed it is packaged as a WAR (Web application ARchive) file and can be deployed to the server, either manually or using build tools. Apply your theme to your pages through the Look and Feel menu. The only limitation is your imagination.

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

Themelets

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

Using Developer Mode with Themes

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

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

Macros

Macros let you assign theme template fragments to a variable. This keeps your theme templates from becoming cluttered and makes them easier to read. Liferay Portal defines several FreeMarker macros...

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

Creating a Theme Thumbnail

Theme thumbnails help users quickly identify your theme. It’s especially important to provide thumbnails when your theme offers color schemes. Here’s how to create a proper thumbnail image for your...

Read More

Specifying Color Schemes in your Theme

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

Read More

Making Themes Configurable with Settings

Theme settings let site administrators control the look and feel of certain aspects of a theme. For example, you can create a theme setting to control the visibility of theme elements, such as only...

Read More
0 (0 Votes)
Themes and Layout Templates Previous