Theme projects created using the Liferay Theme Generator have access to several gulp tasks you can execute to manage and develop your theme. This section of tutorials covers the available actions that these tasks provide, as well as other information you may find useful while developing your theme.

Using Developer Mode with Themes

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

Read More

Building Your Theme’s Files

The gulp build task generates the base theme files, compiles Sass into CSS, and zips all theme files into a WAR file that you can deploy to your server. Follow these steps to build your theme’s...

Read More

Deploying Your Theme

To deploy your theme to your app server, run the gulp deploy task. The gulp deploy task builds your theme’s files, and deploys the generated WAR file to the app server you configured when you...

Read More

Changing Your Base Theme

Once your theme is built, you can use the gulp extend task to change your theme’s base theme. Follow these steps to change your base theme: Navigate to your theme’s root folder and run gulp extend...

Read More

Copying an Existing Theme’s Files

If you want to jump start developing your theme, you can copy an existing theme’s files and build on top of them. The gulp kickstart task automates this process for you. It copies another theme’s...

Read More

Configuring Your Theme’s App Server

When your theme was first created with the Liferay Theme Generator, you had to specify the app server’s location. This was done with the gulp init task. Your theme uses this information to deploy...

Read More

Listing Your Theme’s Extensions

Do you need to know what base theme/themelets your theme extends? There’s a gulp task for that. While you can manually check your theme’s package.json for this information, the gulp status task...

Read More

Automatically Deploying Theme Changes

You may have noticed that you have to deploy your theme manually each time you make a change. This can become tedious during the development process. The gulp watch task lets you see the changes...

Read More

Creating Reusable Pieces of Code for Your Themes

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

Creating a Thumbnail Preview for Your Theme

When you apply a theme to your site pages, you have to choose from the list of available themes in the site selector. The only identification for each theme is the theme’s name, along with a small...

Read More

Creating Color Schemes for Your Theme

Color schemes give your theme additional color palettes. They only require a small amount of changes to your theme’s CSS. This is an easy way to subtly change the look of your theme, while...

Read More

Making Configurable Theme Settings

Every time you want to make a change to a theme, you must make the change and then deploy it to your server. For a Site Administrator, this process is tedious, especially if it’s a minor change to...

Read More

Overwriting and Extending Liferay Theme Tasks

Themes created with the Liferay Theme Generator have access to several default gulp theme tasks that provide the standard features required to develop and build your theme (build, deploy, watch,...

Read More

Compiling and Building Themes with Ant, Gradle, and Maven

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

Injecting Additional Context Variables and Functionality into Your Templates

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

Packaging Independent UI Resources for Your Site

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

Using Liferay Portal’s Macros in Your Theme

Macros can 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 macros in...

Read More
0 (0 Votes)
Creating Themes Previous