Applying Clarity’s Brand Styling

Liferay empowers users with a set of powerful styling tools for both technical and non-technical users, ensuring a consistent visual identity and user experience across your website. As previously explained, these tools, including themes, style books, frontend client extensions, and page element configurations. Together, they can streamline development and integrate existing styles.

So far, we’ve used the classic theme’s default styling options. In this lesson, you’ll use the Theme CSS client extension to overwrite these options. You’ll also update the site’s favicon and logo to make the platform align more closely with Clarity’s branding.

Exercise: Updating Clarity’s Default Theme, Favicon, and Logo

Here you’ll use the Theme CSS client extension to overwrite these options as Walter Douglas. You’ll also update the site’s favicon and logo to make the platform align more closely with Clarity’s branding.

To do this,

1. Open the Site Menu (), expand Site Builder, and click Pages.

2. Click Actions () in the Application Bar and select Configuration.

3. Click Change Current Theme and select Dialect.

   

4. Under Basic Settings, click Select Favicon () and add the clarity-favicon.svg file found in the [repository-folder]/exercises/lesson-8/ folder.

5. Click Change Logo () and select the clarity-logo-c.png file.

   

6. Scroll down to the bottom and click Save.

You can now explore site pages to see how these configurations have affected the site. Next, you’ll deploy a client extension to apply Clarity’s styling on top of the Dialect theme.

Exercise: Deploying and Applying Clarity’s Theme CSS Client Extension

Liferay offers frontend client extensions to provide a flexible and secure way to customize the appearance of your website. With them, you can inject design assets directly into your site pages, empowering you to achieve the desired look and feel without modifying Liferay’s core code.

The training workspace includes a theme CSS client extension for overriding the current theme’s CSS files. Here you’ll deploy it as Walter Douglas.

To deploy Clarity’s theme CSS client extension:

1. Open a new terminal window and go to the liferay-clarity-theme-css folder in your local copy of the training workspace (i.e., [repository-folder]/client-extensions/liferay-clarity-theme-css)

2. Run this command to build and deploy the client extension:

   Blade:

   blade gw clean deploy
   

   Unix-based systems:

   ../../../../gradlew clean deploy
   

   Windows:

   ..\..\gradlew.bat clean deploy
   

3. Verify the command executes successfully in your instance logs.

   2024-05-09 16:17:41.233 INFO  [fileinstall-directory-watcher][BundleStartStopLogger:68] STARTED liferayclaritythemecss*7.4.13 [1449]
   

   Now that you’ve deployed the client extension, you can apply it to your pages.

4. In Clarity’s site, open the Site Menu (), expand Site Builder, and click Pages.

5. Click Actions () in the Application Bar and select Configuration.

6. Under Customization, click Plus () for Theme CSS and select Liferay Clarity Theme CSS.

   

7. Click Save.

   This applies the theme to all of Clarity’s pages.

   Note

   After applying the client extension, you may need to clear your browser cache for the pages to appear as intended.

You can now explore Clarity’s site to see how applying the theme has updated the styling of page elements.

Conclusion

Congratulations, you’ve completed Module 5: Site Building. Throughout this module, you’ve finished setting up Clarity’s site architecture and styling. Next, you’ll learn about content authoring and management.

Up Next: Module 6: Content Authoring & Management

Additional Resources

See official documentation to learn more about customizing site appearance:

• Site Appearance
• Changing Your Site’s Appearance
• Customizing Liferay’s Look and Feel
• Using a Theme CSS Client Extension