IMPORTANT: As we revamp and transition our documentation to this site, you may find the articles you need on Liferay's Help Center.

Analytics Cloud Commerce DXP / Portal DXP Cloud Reference

Documentation Menu

Highlighting

Remove Highlighting

Go Back

• Getting Started
• Site Building
  • Introduction to Site Building
  • Sites
  • Creating Pages
    • Understanding Pages
    • Adding Pages
    • Using Content Pages
    • Defining Headers and Footers
    • Using Widget Pages
    • Page Fragments and Widgets
      • Using Fragments
        • Default Fragments Reference
        • Using Layout Elements
        • Configuring Fragments
          • General Settings Reference
          • Styles Reference
          • Advanced Settings Reference
          • Fragment Sub-Elements Reference
          • Localizing Fragment Configuration Fields
        • Mapping and Linking Fragment Elements
        • Configuring Fragment Visibility
        • Editing Fragment Elements
        • Creating Dropdown Menus with Fragments
        • Duplicating Fragments
        • Saving Fragment Compositions
        • Managing Fragments
        • Propagating Fragment Changes
    • Page Settings
  • Displaying Content
  • Site Appearance
  • Site Navigation
  • Personalizing Site Experience
  • Publishing Tools
  • Optimizing Sites
  • Site Settings
  • Developer Guide
• Content Authoring and Management
• Process Automation
• Using Search
• Collaboration and Social
• Users and Permissions
• System Administration
• Building Applications
• Liferay Internals
• Headless Delivery
• Installation and Upgrades

English

• Japanese
• English

• Liferay Learn
• DXP
• Site Building
• Creating Pages
• Page Fragments and Widgets
• Using Fragments
• Configuring Fragments
• Styles Reference

Styles Reference

Liferay Page Fragments include convenient style settings so you can configure their look and feel via the Liferay UI. Many of these options correspond to CSS classes and have defined tokens supported by Style Books. See General Settings Reference and Fragment Sub-Elements Reference for additional Fragment configuration options.

Follow these steps to access a Fragment’s Styles menu:

1. Begin editing a Page or Template that supports Fragments.

2. Open the Browser panel () in the sidebar menu and select the desired Fragment under Page Elements.

   Alternatively, you can click on the desired Fragment in the Page or Template to open this menu.

   Note

   Sub-elements within a fragment do not have independent style options.

3. Click the Styles tab in the Page Elements side menu.

Many styles have defined tokens supported by Style Books. See Creating a Style Book and Style Book Token Definitions for more information.

Note

In Liferay 7.4 versions U31+ and GA31+, all styles can be configured independently per type of device (using the device buttons at the top of the screen, or Adaptive Media for background images). In earlier versions, only text and spacing style configurations can be configured differently per device.

Spacing

Note

This feature requires Liferay DXP 7.4 U21+ or GA21+. If you are using an older version, see this section instead.

Configure the spacing around the Fragment by clicking on the regions surrounding the rectangle in the Spacing section. Click the outer buttons to configure the space between the Fragment’s frame and the end of its surrounding context (the margin size); this affects margins such as the space between the Fragment’s frame and the edge of the page, or the Fragment’s Container. Click the inner buttons to configure the space between a Fragment’s frame and its content (the padding size).

When you click one of these regions, a list appears with pre-defined options for how many pixels to set the chosen spacing size to. These sizes come from the numbered Spacer fields in the Spacing category when you create or edit the Style Book.

Note

If the spacing options in your Style Book are defined in units other then pixels (such as rem), then they are converted to the equivalent number of pixels when you are selecting them in a Fragment’s Styles configuration.

Text

Format the Fragment’s text.

Field	Description
Font Family	Specifies the font for an element.
Font Weight	Sets how thick or thin characters in text should be displayed.
Font Size	Sets the size of a font.
Text Color	Choose a color for the text. The available color palette can be configured by the Fragment developer. See Fragment Configuration Types Reference for more information.
Text Align	Specifies the horizontal alignment of text in an element. Choose from Left, Right, Center, or Justify.

Background

Configure the Fragment’s background.

Field	Description
Background Color	Choose a background color from the palette. The available color palette can be configured by the Fragment developer. See Fragment Configuration Types Reference for more information.
Image Source	If set to Direct, users can upload a background image. If set to Mapping, users can choose from Documents and Media, Web Content, Blogs, or Categories.
Background Image (Direct)	Select an image from your library or enter an image URL.
Item (Mapping)	Map the background to a specific item from Documents and Media, Web Content, Blogs, or Categories. Once selected, click the Actions button () to edit the item and its permissions, or view its usages.
Field (Mapping)	Determine which of the item’s fields is used for the background image.

Note

When mapping the background to an item’s field, you can only select from fields in its structure. For example, if you’ve selected a Web Content item, you can only select from image fields in its structure and not from images in it’s content field.

Borders

Determine the width, radius, and color of the Fragment’s border.

Field	Description
Border Width	Sets the width of an element’s four borders.
Border Radius	Defines the radius of the element’s corners and allows you to add rounded corners.
Border Color	Sets the color of an element’s four borders. The available color palette can be configured by the Fragment developer. See Fragment Configuration Types Reference for more information.

Effects

Set the Fragment’s opacity and determine whether it has a shadow.

Field	Description
Opacity	Sets the transparency level; 100 is default and 0 is transparent.
Shadow	Adds a shadow around the box; can choose from a small, medium, or large shadow.

Liferay 7.4 U20 and Older

In earlier versions than Liferay DXP 7.4 U21 or GA21, the Spacing section is split into the Margin and Padding sections.

Margin

Configure the space between a Fragment’s frame and the end of its surrounding context (e.g., between the frame and the edge of the page, or between the frame and the edge of its Container or Grid).

Field	Description
Margin Top	Sets the top margin of an element.
Margin Bottom	Sets the bottom margin of an element.
Margin Left	Sets the left margin of an element.
Margin Right	Sets the right margin of an element.

Padding

Configure the space between a Fragment’s frame and its content.

Field	Description
Padding Top	Sets the top padding (space) of an element.
Padding Bottom	Sets the bottom padding of an element.
Padding Left	Sets the left padding of an element.
Padding Right	Sets the right padding of an element.

Additional Information

• Using Content Pages

• Using Fragments

• Creating a Style Book

• Style Book Token Definitions

Not finding what you're looking for?

Pardon our dust as we revamp and transition our product documentation to this site. If something seems missing, please check Liferay Help Center documentation for Liferay DXP 7.2 and previous versions.

Try Liferay's Help Center