Listen to Lesson

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 Global 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 update the site’s theme, favicon, and logo as Walter Douglas to align with Clarity’s branding.

To do this,

Open the Site Menu (), expand Site Builder, and click Pages.
Click Actions () in the Application Bar and select Configuration.
Click Change Current Theme and select Dialect.

NOTE
Themes determine the baseline look and feel for your website, including color schemes, typography, spacing, and other styling options. They serve as the starting point for additional configurations that you can make using style books and frontend client extensions.
Under Basic Settings, click Select Favicon () and add the clarity-favicon.svg file found in the [repository-folder]/exercises/module-5/ folder.

NOTE
Favicons are images used to identify sites in browser tabs.
Click Change Logo () and select the clarity-logo-c.png file.

NOTE
The logo determines the image used to identify the site in the Liferay UI.
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 Global 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 global CSS client extension for extending the current theme’s styles. Here you’ll deploy it as Walter Douglas.

To deploy Clarity’s global CSS client extension:

Open a new terminal window and go to the [repository-folder]/client-extensions/clarity-global-css/ folder in your training workspace.
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
```
Verify the command executes successfully in your instance logs.
```
2024-05-09 16:17:41.233 INFO  [fileinstall-directory-watcher][BundleStartStopLogger:68] STARTED clarityglobalcss_7.4.13 [1449]
```
Now that you’ve deployed the client extension, you can apply it to your pages.
In Clarity’s site, open the Site Menu (), expand Site Builder, and click Pages.
Click Actions () in the Application Bar and select Configuration.
Under Customization, click Plus () for CSS Client Extensions and select Clarity Global CSS.
Click Save.
This applies the CSS styling 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 CSS client extension has updated the styling of page elements.

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