Applying Clarity's Global and Scoped Styling

A key part of creating a polished application is applying custom styles that enhance its usability and align with your brand. With client extensions, you can apply both component-scoped and global CSS. Clarity wants to use these client extensions to improve the visual styling of their distributor locator app and establish consistent brand styling across their website.

In this exercise, you’ll use client extensions to apply both component-scoped and global styling.

Exercise: Adding Styling to the Distributor Table Component

Clarity wants to improve the styling of their Distributor Table component to make the data easier to read and visually distinct. Here, you’ll modify the Distributor Table custom element’s CSS files and redeploy the client extension.

  1. In your file explorer, go to the client-extensions/clarity-distributor-table-custom-element/src/ folder, open the App.css file, and analyze it.
    This file contains the React app’s CSS styling. Notice the clarity-distributor-table-custom-element element reference at the top and the styling within it.

  2. Below the .logo class block, insert a new line and add this:

    table {
}

  3. Within the table block, include these styles:

    Style

    Value

    width

    100%

    border-color

    #89A7E0

    border-width

    1px

    border-style

    solid
     

    Within the table block, include these styles.

    This ensures the table is always full-width and adds a light blue border around it.

  4. Add a th block nested within the table block and include these styles:

    Style

    Value

    text-align

    center

    height

    3rem
     

    Add a th block nested within the table block and include these styles.

    This aligns the header text in the center of the table cell.

  5. Add this below the th block:

    tr:nth-child(even) {
	background-color: #EEF2FA;
}

    This adds a different background for alternating table rows. With the Distributor Table styling finished, you can redeploy the client extension to apply your changes.

  6. Save the file.

  7. In your terminal, go to the client-extensions/clarity-distributor-table-custom-element/ and deploy the client extension.

  8. In your Liferay instance, go to the Distributor Details page to see the new table styling.

    Go to the Distributor Details page to see the new table styling.

Great! You’ve successfully added component-scoped styling to Clarity’s Distributor Table custom element. Next, Clarity needs to apply their brand styling to their entire website.

Exercise: Deploying Clarity’s Theme CSS Client Extension

Here, you’ll explore and deploy a theme CSS client extension containing Clarity’s official styling.

  1. In your file explorer, go to the exercises/module-2/ and find the clarity-theme/ folder.
    This is Clarity’s theme CSS client extension. It was built on top of Liferay’s out-of-the-box Dialect theme.

  2. Take a moment to explore its content and style files.

  3. Move the clarity-theme/ project into the client-extensions/ folder of your course workspace.

  4. In your terminal, deploy the clarity-theme client extension and verify it's successful.

    INFO [fileinstall-directory-watcher][BundleStartStopLogger:68] STARTED claritytheme_7.4.13 [1489]

    With the client extension deployed, you can apply the styling to Clarity’s website globally.

  5. In your Liferay instance, open the Site Menu (icon-product-menu.png), expand Site Builder, and click Pages.

  6. Click Actions (Actions) on the Application Bar and select Configuration.
    Notice that Dialect is the selected theme. This allows the theme CSS client extension to leverage Liferay’s predefined classes and styling variables.

  7. Scroll down to the Theme CSS Client Extension section.

  8. For Theme CSS, click Add (Add) and select Clarity Theme CSS.

    For Theme CSS, click Add and select Clarity Theme CSS.

  9. Scroll down and click Save.
    This applies the theme CSS client extension to Clarity’s website.

  10. Go to the Distributor Details page and verify the new styling.

    Go to the Distributor Details page and verify the new styling.

Great! You’ve deployed Clarity’s theme CSS client extension and applied it to their website, providing a unified visual experience.

Conclusion

Global and scoped styling are effective methods to ensure consistent branding across multiple pages and web applications. By applying these methods strategically, you can deliver unified, smooth digital experiences.

Next, you’ll learn how to implement responsive design in your applications.

Loading Knowledge