Themelet is not reflecting in Liferay7

RE: Themelet is not reflecting in Liferay7

2018-10-10T13:55:34Z

Hi, you're putting these

/* inject:imports */
/* endinject */

in the wrong place.

They should en up in your theme's "_custom.scss" file, not the one in your themelet. You'll be needing that theme, otherwise you would not be able to extend it with the themelet.

A themelet is not something you just deploy like a themelet.

If you would have some custom JS, you will need to edit the "portal-normal.ftl" file in your theme, otherwise the JS from the themelet won't get injected.

RE: Themelet is not reflecting in Liferay7

2018-07-19T04:59:56Z

Hi,
I have created a themelet by following steps mentioned here-https://community.liferay.com/blogs/-/blogs/liferay-7-themelet, After Deploy of my extended Theme, My Themelet properties and css not going to reflect.

For using themelets i did some steps like:

I created the themelet (yo liferay-theme:themelet) within Our Theme folder.(D:\liferay7ga3\plugins\themes\Test-themelet)
I installed that themelet (npm link within Our themelet folder)
I wrote some css inside _custom.scss file (D:\liferay7ga3\plugins\themes\Test-themelet\src\css)
I did use that themelet in Our theme (gulp extend within Our theme folder)
I did rebuild and Deploy of Our Theme(gulp build and gulp deploy)

but i am not getting any reflection in my theme Please help.

RE: Themelet is not reflecting in Liferay7

2018-05-05T04:43:57Z

i have the same problem
i changes in the custom.scss themelet but i do not see the change in my localhost: 8080
i've added scss code to change the background color like this


/* inject:imports */

$primary-color: #333;

body {
  color: $primary-color;
}

/* endinject */

and follow the instructions as in this page https://customer.liferay.com/documentation/7.0/develop/tutorials/-/official_documentation/tutorials/themelets#related-topics

is there something wrong so my custom.scss changes in themelet can not be applied in my theme?
why the change can not be seen in my localhost: 8080?
is there a solution to this problem?

RE: Themelet is not reflecting in Liferay7

2017-11-02T15:43:32Z

Thanks David for your quick reply!

Sorry, I am new to Liferay so I am not able to find "liferay-themes-dev root folder".
Could you please let me know where it is situated or it is the same theme folder in which i want to extend my themelet?

For your information-
1. I am working on Liferay 7
2. I have a separate folders for themelet and theme in which I want to extend my themelet
3. Both folders are at different locations.
4. I have installed themelet globally using 'npm link'

Let me know if you need some more information.

Regards,
Kavita

RE: Themelet is not reflecting in Liferay7

2017-11-02T12:38:11Z

Your first way is the proper way. So you have


/* inject:imports */
/* endinject */

somewhere in your _custom.scss

For using themelets in general, you have to

create the themelet (yo liferay-theme:themelet) within your liferay-themes-dev root folder
install that themelet (npm link within your themelet folder)
use that themelet in your theme (gulp extend within your theme folder)
rebuild your theme

If your themelet is also using some JS magic, paste


<!-- inject:js -->
<!-- endinject -->

in your portal_normal template

RE: Themelet is not reflecting in Liferay7

2017-11-01T14:58:36Z

Hi David,

Thanks for your reply.

I have added provided lines to _custom.scss, but still getting same issue.
I tried putting those lines in below three ways:-

/* inject:imports */
/* endinject */
background-color:red;

/* inject:imports */
background-color:red;
/* endinject */

inject:imports 
background-color:red;
 endinject

Please correct me if I am wrong or if possible please provide some guidelines/examples to follow?

Basically, we need to add custom Javascript and css to other application's theme using themelet.

Regards,
Kavita

RE: Themelet is not reflecting in Liferay7

2017-10-31T07:36:36Z

You need to paste following 2 lines to _custom.scss

/* inject:imports */
/* endinject */

Themelet is not reflecting in Liferay7

2017-10-17T13:06:20Z

Hi,
I have created a themelet by following steps mentioned here- https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/themelets
However, after gulp-deploy themelet style ( body {background-color: red;}) is not reflecting on page.
After gulp-deploy I am getting warning as shown in attached screenshot.

Is there any additional configurations / process we need to follow before running gulp-deploy?
How do themelets work in Liferay?
Can we extend custom js,css and ftl files in themelet?

Thanks in advance.