Enhance Your Liferay 7.4 Portal Design Using Theme Client Extensions for Better User Experience

November 04, 2024

Are you looking to make your website stand out and truly reflect your brand? Want to enhance your user’s digital experience without the hassle of complex coding? In Liferay DXP 7.4 Q2 and Portal 7.4 GA120 and later, you can effortlessly elevate your site's visual appeal with a theme CSS client extension. Transform your online presence and create a unique, engaging experience that captivates your audience—stand out in a competitive market today!

Get started with your first theme CSS client extension using the sample workspace

Prerequisites

Install a Supported Version of Java: Ensure you have a compatible Java version installed. Refer to the compatibility matrix for details on supported JDKs, databases, and environments.

Download the Sample Workspace: Run the following command to download and unzip the sample workspace:

curl -o com.liferay.sample.workspace-latest.zip https://repository.liferay.com/nexus/service/local/artifact/maven/content?r=liferay-public-releases&g=com.liferay.workspace&a=com.liferay.sample.workspace&v=LATEST&p=zip

unzip com.liferay.sample.workspace-latest.zip

Set the Workspace Plugin Version: Open the `settings.gradle` file located at the root of your workspace and set the following classpath:
```
classpath group: "com.liferay", name: "com.liferay.gradle.plugins.workspace", version: "10.1.1"		
```

Exploring the Theme CSS Client Extension

Navigate to the 'client-extensions/liferay-sample-theme-css-1/' directory in the sample workspace. The client extension is defined in the `client-extension.yaml` file:

liferay-sample-theme-css-1: 
	clayURL: css/clay.css 
	mainURL: css/main.css 
	name: Liferay Sample Theme CSS 1 
	type: themeCSS

This configuration specifies the ID, type, and paths to the two CSS resource files. Additionally, it includes the 'assemble' YAML block:

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

This block ensures that after building the theme, any images in the specified folder are included as static resources in the built client extension zip file.

Dependencies and Metadata

The 'package.json' file contains:

{
   "dependencies": {
      "sassy-inputs": "1.0.6"
   },
   "liferayDesignPack": {
      "baseTheme": "styled"
   },
   "main": "package.json",
   "name": "@liferay/liferay-sample-theme-css-1",
   "version": "1.0.0"
}

Here, the 'dependencies' section includes the `sassy-inputs` library, which you can use within your CSS. The 'liferayDesignPack' section specifies the base theme, with options for either 'styled' or 'unstyled'. The remaining fields provide necessary metadata.

It is important to ensure that when applying a theme CSS client extension, any custom styles from your original theme should be added to the '_custom.scss' file to confirm they are retained.

Modifying the Theme CSS

To create a unique button style for your pages, open the '_custom.scss' file and add the following CSS:

.button-custom a {
	background-color: #d24500;
	color: white;
	border: none;
	border-radius: 5px;
	transition: background-color 0.3s;
}
.button-custom a:hover {
	background-color: #5a5a5a;
}

Your client extension is ready now. Let’s build and deploy it using ../../gradlew clean deploy command.

Applying the Theme CSS Client Extension

To apply the theme CSS client extension across the entire site:
- Open the Site Menu, then go to Site Builder and select Pages.
- Click on Options → Configuration
- Scroll down to the Theme CSS Client Extension section and apply it to all pages.
To apply the theme CSS client extension across the entire site:
- Edit the page by clicking the Edit icon at the top.
- In the sidebar, navigate to the Page Design Options and click Configuration.
- In the Theme CSS Client Extension section, click Add and select Liferay Custom Theme CSS 1.
- Click Save, and then save again in the page editor.

Viewing Your Changes

After applying the client extension, you should see your custom button style applied throughout the selected pages. To view these changes outside of Edit mode, ensure you publish the page.

With these steps, you’ve successfully created and deployed a new theme CSS client extension in Liferay DXP 7.4, giving your site a fresh look!

Conclusion

Supercharge your Liferay 7.4 portal like never before! Dive into the awesome world of Theme Client Extensions and create a totally unique digital experience, user-friendly vibe. Contact us today or visit our Liferay theme development services to kick off your transformation journey through Liferay Portal Design —let's make it happen!

For Your Business Requirements