« Back to Blogs

Customize Your Website Appearance Using Liferay Stylebooks

liferay storybook

As Liferay developers, we know Liferay has developed so much in its back-end functionality. We have OSGI to leverage the modules’ dependency and service and rest builders, workflow manager, and many more.Besides that, Liferay is now focusing on enhancing their performance and feature over UI parts, which include theme customizing, Master Pages, Templates, Fragments, and StyleBooks.

What is a stylebook?

Stylebook is an editor which developers can access in the UI part directly. Stylebook provides a feature to update the style rule for specific variables directly from running server instances. We can define CSS value with the variable name, label, and default value which is called token in the stylebook. We can consider a token as JSON data for a single variable and we can create multiple tokens and token sets as per need.

Stylebook is a design system for UI/UX developers. We can create multiple style books and customized token sets as per user’s or organization's needs and requirements. Stylebook provides a reusable and reconfiguration set of a token that can have changed from the style editor.

Style Book Editor aims to bring order by reducing inconsistencies and disconnected experiences that site users have when multiple users work on page creation in parallel with other users.

For providing a concrete and look and feel for site UI developers no need to go inside code or need to understand the flow of the site, With help of a stylebook they can achieve those look and feel configurations from UI only (ex: font-width, colors, font-family, spacing, etc...)

Why Should You Learn it?
  • UI developers can customize page design without coding.
  • The developer does not need to understand code, structure, or technology.
  • We can change the look and feel of the entire page with a single update.
  • It can update any stylebook rule for the entire page from a single place.
  • Users can create consistent style sets.
  • Multiple style books can create and use as per occasion (sale, festival, etc)
What are prerequisites?
  • Download Liferay version supported with stylebook (7.3 CE / DXP)
  • Generated Liferay theme (yo Liferay-theme)

Let’s Make Liferay Style-Book

Go to Root of Theme’s WEB-INF folder and create a file frontend-token-definition.json

  • frontend-token-definition.json file content the multiple token set and style rules for style book.
  • We will configure style books from here only.
  • This file will provide variables we can use in our style code to make it update dynamically.

Use token variables inside SCSS and CSS files.

  • A variable name that we declared at the frontend-token-definition.json file will be used to provide value to CSS styles.
  • Ex :- background-color: var(--variable-name);
  • Deploy theme with updated changes.

Create style book

  • Users need to select a custom theme for the layout on which they want to create a stylebook.
  • We can create style books from the design section inside the side menu and it will select a theme that is selected for that site.

 

Apply Style book

  • When users edit any layout into the Liferay server, they can select the page design option from it.
  • It will show available master pages and a stylebook for that layout.
 

Code Snippet

frontend-token-definition.json

{
   "frontendTokenCategories": [
      {
         "frontendTokenSets": [
            {
               "frontendTokens": [
                  {
                     "defaultValue": "#000000",
                     "editorType": "ColorPicker",
                     "label": "variable-name",
                     "mappings": [
                        {
                           "type": "cssVariable",
                           "value": "variable-name"
                        }
                     ],
                     "name": "VariableName",
                     "type": "String"
                  }
               ],
               "label": "theme-colors",
               "name": "themeColors"
            }
         ],
         "label": "color-system",
         "name": "colorSystem"
      }
   ]
}
Extra Note
  • Configure our custom theme to extend the Atlas theme also. We need to add clay.scss file to the theme’s /src/css/ folder and import the below dependency inside fine:
@import 'clay/atlas';

 

  • Configure one more file call _imports.scss to the theme’s /src/css/ folder . this will help in override clay variables to the atlas variables and for that import below dependency inside file: 
@import "bourbon";
@import "mixins";
@import "compat/mixins";
@import "clay/atlas-variables";

 

  • For using language property inside style book we need to add below property to liferay-plugin-package properties
Provide-Capability=liferay.resource.bundle;resource.bundle.base.name="content.Language"

 

  • All style book changes which happen dynamically happen inside id="wrapper" of file portal_normal.ftl you may find that some UI is not getting updated as per style book changes because code is out of id="wrapper"
Conclusion

Style books help the developers in many ways and the user can customize it the way they want. We are a Liferay development company and we provide assistance in developing Liferay products.

contact-us Request a callback WhatsApp