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.

  1. Run the following command:

    ./gradlew :client-extensions:liferay-ticket-theme-css:deploy
    
  2. In Liferay, select the Product Menu (Product Menu) and navigate to Site BuilderPages.

  3. Click Options (Options icon) in the top right next to the global menu and click Configuration.

  4. Scroll down to the theme CSS client extension section and click Add (Add icon).

  5. Select the Tickets Theme CSS that was deployed.

    Select the ticket theme css client extension.

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

Next: Deploying the Custom Ticketing Application.

Relevant Concepts

Capabilities

Product

Contact Us

Connect

Powered by Liferay
© 2024 Liferay Inc. All Rights Reserved • Privacy Policy