A theme is made up of several files. Although most of the files are named after their matching components, their functions may be unclear. This reference guide explains each file’s usage to make clear which files to modify.
Themes built with the Liferay JS Theme Toolkit have the anatomy shown below:
- (custom images)
- (Many directories)
Regarding CSS files, you should only modify
You can of course overwrite any CSS file you want, but if you modify any other files, you’re removing styling that Liferay DXP 7.2 needs to work properly.
Used for Clay custom styles, i.e. styles for a third party Bootstrap theme.
Anything written in this file is compiled in the same scope as Bootstrap/Lexicon,
so you can use their variables, mixins, etc. You can also implement any of the
variables you define in
Used to store custom Sass variables. This file gets injected into the Bootstrap/Lexicon build, so you can overwrite variables and change how those libraries are compiled.
Used for custom CSS styles. You should place all of your custom CSS modifications in this file.
Used for overwriting variables defined in
wiping out the whole file.
Used for custom FreeMarker variables i.e. theme setting variables.
The theme template for the theme’s navigation.
Similar to a static site’s
index.html, this file acts as a hub for all theme
The theme template for pop up dialogs for the theme’s portlets.
The theme template for the theme’s portlets. If your theme uses Application Decorators, you can modify this file to create application decorator-specific theme settings.
Contains the configuration settings for your app server, in Node.js tool-based
themes. You can change this file manually at any time to update your server
settings. The file can also be updated via the
gulp init task.
Contains theme setting information such as the theme template language, version,
and base theme, for Node.js tool developed themes. You can update this file
gulp extend task
can also be used to change the base theme.
Contains basic information for the theme. If your theme has theme settings, they are defined in this file. For a full explanation of this file, please see the Definitions docs.
Contains general properties for the theme. Resources Importer configuration settings are also placed in this file. For a full explanation of the properties available for this file please see the 7.2 Properties documentation.