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.
There are two main approaches to theme development for Liferay DXP 7.1: themes built using the Node.js build tools with the theme generator and themes built using Dev Studio DXP.
Themes developed with the theme generator have the anatomy shown below. Although themes developed with Dev Studio DXP have a slightly different anatomy built with the theme project template, the core theme files are the same.
- (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.1 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. See the Portlet Decorators tutorial for more info.
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.1 Properties documentation.