inherit & override a parent theme - Creating child themes with Liferay - Triberay

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:

• Your theme(s) need to be node based, in other words, they need to be created with the liferay theme generator.
• You need to own the source code of the parent theme.

 

Step 1: Preparing the parent theme

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.

 

Step 2: Creating the child theme

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

 

Step 3: Extending from the parent theme

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

 

Things to pay attention to:

_custom.scss

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)

Making changes to the parent theme

 

Local Git repo is also linked

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.