Customizing Clarity’s Front End

Now let’s apply what you’ve learned to make some changes to Clarity’s site appearance. Here you’ll use frontend client extensions to

• Modify the current theme CSS
• Update the website favicon
• Add a CSS resource to a page

These exercises showcase the versatility and accessibility of frontend client extensions.

Exercise: Modifying a Theme Client Extension

Client Extensions separate customizations from the Liferay core. This helps simplify updates while freeing you to use your desired technologies and deployment models. As seen previously, the theme CSS client extension provides a way to override the current theme’s CSS files. Here you’ll update the client extension provided in the training workspace and deploy your changes as Walter Douglas.

To do this,

1. Sign in as Walter Douglas.

   • Email: [e-mail]
   • Password: learn

2. In the Clarity Public Enterprise Website, go to the Home page.

   Note that Clarity’s “See the Difference” banner uses a beige background (i.e., #FCFBF8). Let’s make a change to Clarity’s theme CSS client extension to update it.

   

3. Navigate to the [repository-folder]/exercises/lesson-20/ folder, open the layout-background-color.scss file, and copy its contents.

   This file contains styling for overwriting the background color for the .lfr-layout-structure-item-container CSS class.

4. Navigate to the [repository-folder]/client-extensions/liferay-clarity-theme-css folder, open the src/css/_custom.scss file, paste the copied CSS style into it, and save your changes.

5. Open a new terminal window, navigate to the [repository-folder]/client-extensions/liferay-clarity-theme-css folder, and run this command to build and deploy the theme client extension:

   blade gw clean deploy
   

   Or use Gradle Wrapper:

   ../../gradlew clean deploy
   

6. Verify the command executes successfully.

7. If necessary, log out of the Clarity portal. It may also be necessary to clear the cache in the browser if this change is not reflected automatically.

8. Verify the background of the container is now gray:

   

   Tip: When making changes to theme CSS values, you may need to clear your browser’s cache to see your changes.

9. Now that you have seen how you can modify CSS styles using a theme client extension, remove the styling change just made from the _custom.scss file.

Next you’ll learn how to use client extensions to update the site’s favicon.

Exercise: Deploying a Client Extension for Favicon

In a previous exercise, you set the site favicon manually via the Liferay UI. With client extensions, you can streamline updates to your site by deploying the favicon along with your other frontend client extensions. Here you’ll use a client extension to update Clarity’s favicon as Walter Douglas.

To do this,

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

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

   blade gw clean deploy
   

   Or use Gradle Wrapper:

   ../../gradlew clean deploy
   

3. Verify the command executes successfully.

4. Open the Site Menu (), expand Site Builder, and select Pages.

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

6. In the Design tab, click Select Favicon ().

7. In the modal window, go to the Client Extension tab and select Liferay Clarity Theme Favicon.

8. Click Save.

9. Go to the Home page and verify the page’s favicon was updated.

   

Exercise: Creating a New CSS Client Extension

Liferay provides the CSS client extension for adding a single CSS resource to site pages. Here you’ll create one of these client extensions using an external cdnjs URL as Walter Douglas user.

To do this,

1. Open the Global Menu (), go to the Applications tab, and click Client Extensions.

2. Click Add () and select Add CSS.

3. For name, enter Clarity Animation.

4. For CSS URL, enter https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css.

   

5. Click Publish.

6. Go to the Home page in the Clarity Public Enterprise Website.

7. Click Configure Page () and select the Design tab.

8. Scroll down and click Add CSS Client Extensions.

9. Choose Clarity Animation and click Add.

   

10. Scroll down and click Save.

    This saves the page as a draft. For the changes to take effect, you must publish the page.

11. Return to the Home page, click Edit (), and click Publish.

12. Open the Site Menu (), expand Design, and click Fragments.

13. Under Fragment Sets, click Clarity Components.

14. Select the Clarity Gradient Container fragment to begin editing it.

15. In your file browser, navigate to the [repository-folder]/exercises/lesson-20/ folder, open the clarityanimation.html file, and copy its content into the fragment’s HTML field.

    This adds three CSS animation classes to the fragment from the from the animate.css library on cdnjs (i.e., animate__animated, animate__slower, and animate__fadeIn).

    

16. Click Publish.

    Now that you’ve updated the fragment, you can propagate these changes to existing instances of the fragment in site pages.

17. Click Actions () for the Clarity Gradient Container fragment, and select View Usages.

18. Check all boxes and click Propagate.

    

    Now, all fragments used throughout the site are updated with the new CSS classes.

19. Go to the Home Page and confirm the animation works.

    The animation now plays every time you refresh or navigate to the Home page.

    

Conclusion

Congratulations! You have created, modified, and deployed your own frontend client extensions. Next, we’ll explore the tools you can use to model and manage data structure in Liferay.

Next Up: Modeling and Managing Data Structures

Additional Resources

See official documentation to learn more about frontend client extensions:

• Client Extensions
• Customizing Liferay’s Look and Feel