Integrating Third Party Themes with Clay

Clay Base provides all the features and components your theme needs and inherits Bootstrap’s styles. As a result, Clay Base is fully compatible with third party themes that leverage Bootstrap’s Sass variable API.

The Styled Theme uses Clay Base to provide its styles and components. Therefore, as a best practice, you should use the Styled base theme to integrate third party themes.

Follow these steps to integrate a third party theme with Clay Base:

  1. Create a new theme with the Styled Theme as its base. This is the default base theme for newly created themes, so no further action is required. This provides the Clay Base files you need.

  2. In the theme’s /src/css/ folder, add a file named _clay_variables.scss. Place your Atlas, Bootstrap, and Clay Base variable modifications in this file.

  3. Create a folder inside /src/css/ to house your third party theme (e.g. /src/css/my-third-party-theme/)

  4. Copy the CSS contents of the theme to the folder you just created.

  5. In _clay_variables.scss, import the file containing the theme variables. For example, @import "my-third-party-theme/variables.scss";

  6. In _custom.scss, import the file containing the CSS. For example, @import "my-third-party-theme/main.scss";

Now you know how to integrate third party themes with Clay Base!

« Customizing Atlas and Clay Base Themes in Liferay DXPUsing Clay Icons in a Theme »
Was this article helpful?
0 out of 0 found this helpful