This is just a hack that I started doing because I was creating multiple sites using the same theme. The theme has various colour schemes, so that can just be configured to make the websites look different. I also love to import the static pages of the website using the resource-importer.
This is when the Theme Gulp Tasks come in very handy.
In this article I will explain the steps needed to create those child themes.
There are a few prerequisites though to be able to make this work:
This step is fairly simple:
Go to the root folder of the theme and execute
npm link
This makes your parent theme available as an npm module, by creating a symlink to it. Check the npm documentation to find out more about npm link.
First, make sure you have the latest version of the liferay-theme-generator:
<sudo> npm install -g generator-liferay-theme
Next create the base for your new child theme:
yourname yo liferay-theme _-----_ | | .--------------------------. |--(o)--| | Welcome to the splendid | `---------´ | Liferay Theme generator! | ( _´U`_ ) '--------------------------' /___A___\ | ~ | __'.___.'__ ´ ` |° ´ Y ` ? What would you like to call your theme? your-theme-name ? Would you like to use this as the themeId? your-theme-name ? Which version of Liferay is this theme for? 7.0
This is where the magic happens :)
Extend from the parent theme that is available in your local npm repository:
cd your-theme-name gulp extend
You will be presented with the following option:
[17:08:13] Using gulpfile ~/git/devnomads/devnomads-child-theme/gulpfile.js [17:08:13] Starting 'extend'... ? What kind of theme asset would you like to extend? (Use arrow keys) ❯ Base theme Themelet
Choose "Base theme" and then next "Search globally installed npm modules (development purposes only)"
? What kind of theme asset would you like to extend? Base theme ? What base theme would you like to extend? Styled Unstyled ────────────── ❯ Search globally installed npm modules (development purposes only) Search npm registry (published modules)
You should now see and be able to select the previously linked parent theme:
? What kind of theme asset would you like to extend? Base theme ? What base theme would you like to extend? Search globally installed npm modules (development purposes only) ? Select a theme (Use arrow keys) ❯ your-parent-theme
Done!
yourname gulp extend [17:08:13] Using gulpfile ~/git/devnomads/devnomads-child-theme/gulpfile.js [17:08:13] Starting 'extend'... ? What kind of theme asset would you like to extend? Base theme ? What base theme would you like to extend? Search globally installed npm modules (development purposes only) ? Select a theme your-parent-theme + your-parent-theme@1.0.0 added 1 package in 7.87s [17:13:38] Finished 'extend' after 5.4 min
You can now deploy your new theme and because we haven't overridden anything yet, it will look exactly the same as the parent theme
gulp deploy
The child theme adds an empty custom.scss file and thereby overwrites the parent's _custom.scss.
If you have added any css or includes in the _custom.scss of your parent theme then those will not be loaded in the child theme.
Solution: keep the _custom.scss in your parent theme empty. Create a separate scss file and include it in the bottom of main.scss. This separate scss file can then contain your custom css. e.g. _your-theme-name.scss:
main.scss main.scss
@import "imports"; @import "base"; @import "portal"; @import "taglib"; @import "application"; @import "layout"; @import "navigation"; @import "portlet"; @import "extras"; @import "custom"; @import "your-theme-name";
(if you don't have the main.scss file in your parent theme yet, then you can copy it from the build/css folder)
The parent theme is added as a npm dependency (in package.json), which makes the parent theme appear as a module under node_modules.
My IntelliJ workspace detected the git repository in the node_modules which was not what I wanted.
I deleted the .git folder and found out the hard way that the folder under node_modules is just a symbolic link and not a copy. So, deleting the .git folder actually deleted my local repository from my parent theme and not just from the node_modules folder in the child theme.