Theme Contributor

The Theme Contributor sample contributes updates to the UI of the theme body, Control Menu, Product Menu, and Simulation Panel. When deploying this sample with no customizations, the colors of the theme and aforementioned menus are updated.

Figure 1: Your Liferay DXP pages and menu fonts now have a yellow tint.

Figure 1: Your Liferay DXP pages and menu fonts now have a yellow tint.

Also, there’s a simple JavaScript update that is provided, which logs a message to the browser’s console window that states Hello Blade Theme Contributor!.

Figure 2: The message is printed to your browsers console window using JavaScript.

Figure 2: The message is printed to your browser's console window using JavaScript.

What API(s) and/or code components does this sample highlight?

This sample demonstrates a way to contribute updates to a Liferay DXP theme. Theme Contributors let you package UI resources (e.g., CSS and JS) independent of a theme to include on a Liferay DXP page.

How does this sample leverage the API(s) and/or code component?

To modify this sample, replace the corresponding JS or SCSS file with the JavaScript or styles that you want, or add your own JS or SCSS files. For example, this sample provides an update to the Control Menu’s background-color in its src/main/resources/META-INF/resources/css/blade.theme.contributor/_control_menu.scss file:

body {
        .control-menu {
                background-color: darkkhaki;

All of the SCSS files used in this sample are imported into the main blade.theme.contributor.scss file:

@import "bourbon";
@import "mixins";

@import "blade.theme.contributor/body";
@import "blade.theme.contributor/control_menu";
@import "blade.theme.contributor/product_menu";
@import "blade.theme.contributor/simulation_panel";

If you add your own SCSS files, you must add them to the list of imports in the blade.theme.contributor.scss file.

Likewise, the sample blade.theme.contributor.js logs a message to your browser’s console window using the following JS logic:

console.log('Hello Blade Theme Contributor!');

For more information on Theme Contributors, visit the Theme Contributors tutorial.

Where Is This Sample?

There are three different versions of this sample, each built with a different build tool:

« Template Context ContributorThird Party Packages Portal Exports »
Was this article helpful?
0 out of 0 found this helpful