If you want to package UI resources independent of a specific theme and include them on every page, a Theme Contributor is your best option. If, instead, you want to include separate UI resources on a page that are attached to a theme, use themelets.
A Theme Contributor is a module that contains CSS and JS resources to apply to the page. The Control Menu, Product Menu, and Simulation Panel are packaged as Theme Contributors.
If you want to edit or style these standard UI components, you must create a Theme Contributor and add your modifications on top. You can also add new UI components to Liferay DXP by creating a Theme Contributor. This article shows how to create a Theme Contributor module.
Follow these steps to create a Theme Contributor:
Liferay-Theme-Contributor-Typeheader to your module’s
bnd.bndfile to identify your module as a Theme Contributor, and add the
Web-ContextPathheader to set the context from which the Theme Contributor’s resources are hosted. See the Control Menu module’s
bnd.bndbelow as an example:
Bundle-Name: Liferay Product Navigation Product Menu Theme Contributor Bundle-SymbolicName: com.liferay.product.navigation.product.menu.theme.contributor Bundle-Version: 3.0.4 Liferay-Theme-Contributor-Type: product-navigation-product-menu Web-ContextPath: /product-navigation-product-menu-theme-contributor
The Theme Contributor type helps Liferay DXP better identify your module. If you’re creating a Theme Contributor to override an existing Theme Contributor, you should try to use the same type to maximize compatibility with future developments.
bnd.bndfile to set a priority for your Theme Contributor. To override another Theme Contributor’s styles, such as those for the Control Menu, set a higher weight. The higher the value, the higher the priority. If your Theme Contributor has a weight of 100, it will be loaded after one with a weight of 99, allowing your CSS to override theirs:
src/main/resources/META-INF/resourcesfolder in your module and place your resources (CSS and JS) in that folder.
Build and deploy your module to see your modifications applied to Liferay DXP pages and themes.
That’s all you need to do to create a Theme Contributor for your site. Remember, with great power comes great responsibility, so use Theme Contributors wisely. The UI contributions affect every page and aren’t affected by theme deployments.