1. Home
  2. Development
  3. RE: Themelet is not reflecting in Liferay7

RE: Themelet is not reflecting in Liferay7

Kavita Naik, modified 8 Years ago.
Themelet is not reflecting in Liferay7
New Member Posts: 6 Join Date: 10/17/17 Recent Posts
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.

Attachments:

thumbnail
David Proba, modified 8 Years ago.
RE: Themelet is not reflecting in Liferay7
Junior Member Posts: 26 Join Date: 10/30/14 Recent Posts
You need to paste following 2 lines to _custom.scss

/* inject:imports */
/* endinject */
Kavita Naik, modified 8 Years ago.
RE: Themelet is not reflecting in Liferay7
New Member Posts: 6 Join Date: 10/17/17 Recent Posts
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
thumbnail
David Proba, modified 8 Years ago.
RE: Themelet is not reflecting in Liferay7
Junior Member Posts: 26 Join Date: 10/30/14 Recent Posts
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
Kavita Naik, modified 8 Years ago.
RE: Themelet is not reflecting in Liferay7
New Member Posts: 6 Join Date: 10/17/17 Recent Posts
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
Ekky Melynda, modified 7 Years ago.
RE: Themelet is not reflecting in Liferay7
New Member Post: 1 Join Date: 4/18/18 Recent Posts
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?
thumbnail
Michael Adamczyk, modified 7 Years ago.
RE: Themelet is not reflecting in Liferay7
New Member Posts: 11 Join Date: 3/16/12 Recent Posts

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.

Ravi Shankar, modified 7 Years ago.
RE: Themelet is not reflecting in Liferay7
Junior Member Posts: 40 Join Date: 7/13/16 Recent Posts

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.