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:
Begin editing a Page or Template that supports Fragments.
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.
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.
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 ( |
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. |