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.
Next: Deploying the Custom Ticketing Application.