Introduction
The Liferay application provides strong tools for website design as well as appearance customization. Stylebooks provide users with a tool to create global styles through definition methods instead of theme modifications. Which situation would warrant implementing a theme-based design versus selecting the stylebook-only solution? This entry examines Liferay stylebook distinctions while presenting users with configuration procedures for Stylebooks in Liferay.Prerequisites
- Liferay 7.4
Understanding stylebooks in liferay
The configuration sets known as Stylebooks inside Liferay provide global design guidelines for your site that incorporate all design aspects from fonts to colors to spacing. The application creates visual coherence directly from the theme’s code without altering its underlying structure.Stylebooks allow you to:- Your site pages should use uniform color schemes and typography formats.
- You should explain how to set the spacing characteristics and configure border radius and create shadow effects.
- You can modify buttons and cards together with background styles.
- The system enables administrators to change theme configurations without requiring a new code deployment.
Theme vs No Theme : Choosing the Right Approach
- Using a Theme with Stylebooks
Implementing a theme with Stylebook functionality becomes the best choice when your site needs complex designs along with customized CSS and extensive visual modifications.
When to Use a Theme with Stylebooks
- A distinctive design must have extensive customized features.
- A theme enables you to apply its built-in styles and adjust them through the Stylebook tool.
- Your site needs tailored page template designs together with sophisticated component design elements.
- Programming developers take part in theme alteration and extension work.
How to Apply a Stylebook to a Themed Site
- Go to Site Administration → Design → Stylebooks
- Create a new stylebook.
- Customize colors, fonts, and other style properties.
- Click Publish to apply changes across the site.
Frontend Token Definition for Custom Themes
You can create Frontend Tokens when using your own theme so Stylebooks can dynamically modify theme properties. Frontend Tokens function as variables for which Stylebooks offer the capability to override.
Frontend Token definition in your theme occurs through the following process:
Your custom theme becomes modifiable with dynamically changing properties through Frontend Tokens when you enable this feature for Stylebooks to override your theme properties. The frontend tokens serve as variables which Stylebooks can modify.
To define frontend tokens in your theme :
Locate the frontend-token-definition.json file inside your theme’s src/WEB-INF directory.
- Define your tokens, such as colors, typography, or spacing:
- Deploy the theme and apply a Stylebook to see real-time changes.
- Using Only Stylebooks (No Theme)
A site built for simple functionality or handled by design teams who lack development training should use Stylebooks without the addition of themes for best results.
When to Use Only Stylebooks
- Your site requires minimal maintenance together with quick page loading.
- The website depends on native Liferay arrangements instead of implementing customized theme elements.
- Your main goal is to enable non-developers to make style changes independently from the developers.
- The current project scope does not demand created CSS or JavaScript scripts from developers.
How to Apply Stylebooks Without a Theme
- Open Site Administration and then select Design followed by Stylebooks from the dropdown.
- Click Create New Stylebook.
- Create color designs as well as typeface selections and spacing standards and button design parameters.
- Apply the Stylebook to your site after saving it.
- The review process ensures page consistency then additional adjustments can be made.
Note : Since the Classic Theme is applied by default, we cannot change the properties. We can only modify the values of predefined properties using Stylebooks.
Conclusion
Your project must evaluate between theme-based styling and Stylebook-only function to determine its best fit. Stylebooks together with a theme provide better flexibility for extensive customization options and developer assistance. An efficient style management solution is provided through Stylebooks when sites need to maintain global styles without coding.
Teams using Liferay Stylebooks maintain a visually unified site with no effort required since the platform offers these tools in both implementation approaches. The use of frontend token definitions alongside predefined properties enables you to maintain smooth design updates that result in consistent page appearance.
