Documentation

Styles Reference

All fragments have a Styles settings section except for the Collection Display fragment. Use the style settings to configure your fragments’ look and feel. 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.

Note

By default, style configurations apply to the entire fragment, so all elements in the fragment inherit these changes if their CSS allows it; otherwise, the inner elements are ignored. You can configure custom fragments to apply style changes only to some inner elements. See Applying Styles to Fragments for more information.

To access a fragment’s Styles menu,

  1. Begin editing a page or template that supports fragments.

  2. Open the Browser panel (Browser) in the sidebar menu and select the desired fragment.

    Alternatively, click the desired fragment in the page or template.

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

Access a fragment's Styles settings in the Browser panel of the editing sidebar menu.

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

Note

For Liferay 7.4 U31+/GA31+, you can configure fragment styles for individual viewports by clicking the device buttons at the top of the screen or setting up adaptive media for background images. For earlier versions, you can only configure text and spacing styles for different devices.

Spacing

For Liferay 7.4 U47+/GA47+

Click the button for the spacing dimension to configure. The inner buttons determine the fragment’s padding, while the outer buttons determine its margins. In this context, padding refers to the space between a fragment’s frame and its content, while margin refers to the space between the fragment’s frame and the end of its surrounding context.

When you click any of the regions, choose the desired spacing from the list of sizes shown.

Clicking the padding or margin buttons lets you select from existing tokens or enter a custom value. The predefined tokens come from the numbered Spacer fields in the style book’s Spacing category. If you enter a custom value, select its unit (e.g., px, rem). To restore the field to its initial value, click the Reset button ( Reset ).

Note

For 7.4 U46/GA46 and earlier versions, if your style book uses a unit other than pixel to define spacing values (e.g., rem), they are converted to pixels during fragment configuration.

Text

Format the fragment’s text.

Field

Description

Font Family ( Font Family )

Specifies the font for an element.

Font Weight ( Font Weight )

Sets how thick or thin characters in text should be displayed.

Font Size ( Font Size )

Sets the size of a font.

Text Color ( Font 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 ( Align Left Align Center Align Right Justify )

Specifies the horizontal alignment of text in an element. Choose from Left, Center, Right, or Justify.

Format the fragment's text.

Background

Configure the fragment’s background.

Field

Description

Background Color ( 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 (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.

Configure the fragment's background.

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 ( Border Width )

Sets the width of an element’s four borders. Click the Units button ( Units ) to select border width unit (e.g., px, rem). Click the Reset button ( Reset ) to revert the field to its initial value.

Border Radius ( Border Radius )

Defines the radius of the element’s corners and allows you to add rounded corners.

Border Color ( 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.

Determine the width, radius, and color of the fragment's border.

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 ( Shadow )

Adds a shadow around the box. Choose from a small, medium, or large shadow.

Set the fragment's opacity and determine whether it has a shadow.

Liferay 7.4 U20 and Older

For 7.4 U20/GA20 and earlier versions, spacing configurations are divided 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