# 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.

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.

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.

## 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.

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

Field

Description

Sets the top padding (space) of an element.