Liferay Custom Fields - Fragment Style Classes

Easy to access, enumerated classes for fragments.

Supported Liferay Versions

This app supports DXP versions in their premium support phase at the time of this release.

• 2025 Q4
• 2025 Q3
• 2025 Q2
• 2025 Q1
• 2024 Q1
• 7.4

If you need compatibility for older DXP releases, you can create a legacy version with a year that supports the release, and submit a PR.

Getting Started

This is meant to be imported into a client extension. Since this is the first app using the framework, it's already included as an example.

• If you don't have the custom fields client extension yet, here's how to get it:
  • In a terminal, navigate to your Liferay workspace's client-extensions folder
  • Clone the client extension into your folder using git clone [email protected]:lbeharxtivia/liferay-editor-custom-fields-client-extension.git
  • Run blade gw clean deploy to deploy your new client extension
• Go to your custom fields client extension folder in terminal
• Install the fragment-classes module yarn add @liferay-editor-custom-fields/fragment-classes^74.0.0
• Import and call the init function in src/index.ts

import initFragmentClasses from '@liferay-editor-custom-fields/fragment-classes';

initFragmentClasses();

How to use

• Create a css rules for a class beginning in fragment-style- anywhere on the site, whether in the theme a css client extension, or somewhere else.
• In the page editor, choose the fragment you want to style.
• The client extension will insert a "Fragment Style Class" dropdown to the top of your General tab, add then populate it with a list of classes beginning in fragment-style- defined in CSS rules.
• Choose the class you want to style the fragment with. The styles will be applied automatically.

License

MIT Licensed. Copyright (c) Xtivia 2026.