Styling Widgets with Widget Templates

Styling Widgets with Widget Templates

You can use widget templates to customize the appearance and functionality of out-of-the-box widgets, such as the Asset Publisher and Media Gallery widgets.

Creating a Widget Template

  1. From the Site Menu Site Menu, click DesignTemplates.

  2. Go to the Widget Templates tab.

    Access the Widget Templates page from the Templates application.

  3. Click Add (Add Button) and select a widget for the template (e.g., Asset Publisher).

    The Widget Template creation page provides controls to easily add fields or variables to use.

  4. Add a name for your widget template.

  5. Enter your FreeMarker script into the template editor. You can use the Elements side panel ( Elements ) to add fields, variables, and utilities to your template. Alternatively, you can type ${ to see field suggestions.


    For Liferay DXP/Portal 7.4+, widget templates only support FreeMarker. Velocity is no longer supported.

  6. Click Save.

This creates a new widget template, which you can apply to the corresponding type of widget on a page.

Applying a Widget Template

  1. Click the Actions button (Actions Button) for the appropriate widget, then click Configuration.

  2. Find the Display Template drop-down menu and select the desired template.

    Select your widget template from the Display Template drop-down menu in the corresponding widget's configuration.


    This drop-down menu is on the default tab, Setup, for most widgets. For the Asset Publisher widget, this setting is under the Display Settings tab.

  3. Click Save.

    After you save your widget's configuration to use your widget template, it uses your template for its display.

The widget now uses the custom template. By using more advanced widget template scripts, you can further enhance the capabilities of your widgets.