Applying a Custom Theme

You can use different front-end client extensions to customize the look and feel of your site. Specifically, theme CSS type client extension can be used as an alternative to building custom themes.

Deploy the liferay-ticket-theme-css client extension.

Run the following command:

./gradlew :client-extensions:liferay-ticket-theme-css:deploy

In Liferay, select the Product Menu () and navigate to Site Builder → Pages.
Click Options () in the top right next to the global menu and click Configuration.
Scroll down to the theme CSS client extension section and click Add ().
Select the Tickets Theme CSS that was deployed.
Scroll to the bottom and click Save. In the product menu, click Home. The custom theme has been applied.

Examine the Custom Theme CSS Code

The assemble block section of the client-extension.yaml file looks like this:

assemble:
    - from: build/buildTheme/img
      into: static/img

This liferay-ticket-theme-css is a theme CSS type client extension. It is defined as follows:

liferay-ticket-theme-css:
    clayURL: css/clay.css
    mainURL: css/main.css
    name: Tickets Theme CSS
    type: themeCSS

See Theme CSS YAML Configuration Reference for an explanation of each property.

The theme’s customizations appear in the two files in the /src/css folder.

The _clay_variables.scss file provides any CSS clay variables to be overwritten.

The _custom.scss file provides any CSS customizations.

See the Clay CSS documentation to learn more about the variables and customization. And see using a theme CSS client extension to see another client extension example.