Bundling and Copying Files from an Existing Theme
By using gulp’s kickstart
task, you can copy the files from a previously created theme into any theme you choose. This functionality is useful in case you want to develop a theme based on an existing one.
The process is different from extending a theme. While the kickstart
task serves as a single inheritance method, theme extending applies the extended theme’s src
files dynamically on top of the base theme on every build.
Using gulp’s kickstart
task can overwrite files with the same name. Backup your files as necessary.
Creating and Copying Themes
In case you did not set up your environment to create a theme, see Setting Up an Environment and Creating a Theme.
Follow these steps to create multiple themes and copy the files from one into the other:
-
Create two themes by Running the Liferay Theme Generator. Label them as
Liferay Theme 1
andLiferay Theme 2
. -
Navigate to Liferay Theme 1’s root folder.
cd liferay-theme1-theme/
-
Open
src/css/_custom.scss
and add the code snippet:body, #wrapper { background: orange; } a { transition: color 2s ease-in-out, font-size 2s ease-in-out; } a:hover { color: yellow; font-size: 1.2rem; }
-
Run
npm link
to install Liferay Theme 1 globally, making it usable within other themes. -
Go to Liferay Theme 2’s folder and run gulp’s
kickstart
task.cd liferay-theme2-theme/
gulp kickstart
-
You can choose to copy from globally installed themes or themes published on the npm registry. For this example, choose the first option.
? Where would you like to search? (Use arrow keys) ❯ Search globally installed npm modules Search npm registry (published modules)
-
Select Liferay Theme 1 in the npm modules list.
? Select a theme (Use arrow keys) ❯ liferay-theme1-theme
A confirmation message appears when gulp has finished copying the theme’s files.
[10:49:43] Finished 'kickstart' after 4.29 s
-
Open
src/css/_custom.scss
and check if it’s similar to Liferay Theme 1’s file. -
Run
gulp deploy
to build and deploy Liferay Theme 2. That way, you can use your newly configured theme in your running Liferay Portal instance.
Now you know how to develop a theme based on an existing one by configuring and copying its files.