2

I'm trying to essentially recreate the classic theme on liferay 7.2 however I'm having issues with doing so. I've tried downloading the liferay folder from github that contains everything so that I can get the theme folder form there however, this doesn't work as it just returns an error when I try to deploy the theme back to localhost.

If there is a better way to simply edit the header and the navbar portlet so that it looks like it does in the classic theme that would also be a massive help.

So this ss shows the result of gulp deploy with the folder from github

And this ss is the result of a custom folder with gulp deploy

inderbir
  • 43
  • 7
  • Could you post what have you tried to done with code example, and what is the error that is returned. Look at [how to ask question](https://stackoverflow.com/help/how-to-ask) – Igor Sep 11 '19 at 12:49
  • Are only css restyle? – Daniele Baggio Sep 11 '19 at 13:02
  • @Igor added them - only doing it through the cli – inderbir Sep 11 '19 at 14:04
  • @DanieleBaggio sorry? I'm not sure what you mean – inderbir Sep 11 '19 at 14:04
  • @inderbir https://portal.liferay.dev/docs/7-1/tutorials/-/knowledge_base/t/creating-themes you can build a new page theme upon the "styled" base theme ... – André Sep 11 '19 at 18:35
  • @inderbir for the navigation menue porllet you can , write isp fragment https://portal.liferay.dev/docs/7-0/tutorials/-/knowledge_base/t/overriding-a-modules-jsps, or place the css in the theme you already have created and then configure the new css class in the look & feel configuration section of the navigation menu portlet – André Sep 11 '19 at 18:39
  • @André I know and I need to do that using the classic theme as a base. Also the documentation you've linked is for 7.0/1 and 7.2 is different in some places and in this case it doesn't work the same way – inderbir Sep 12 '19 at 09:00
  • @inderbir so please edit your question .. to document where your are at the moment .. but sry wasn't aware of that there has been breaking changes regarding 7.2 .. so take the blade sample instead ? https://github.com/liferay/liferay-blade-samples/tree/7.2/maven/themes/simple-theme – André Sep 12 '19 at 18:14
  • @André okay apologies, i'm new to this but thank you ill give it a go! – inderbir Sep 13 '19 at 14:32

2 Answers2

2

This is what I do:

  1. create a theme with the Liferay Theme Generator
  2. copy or download the changes from github and put them all in your src folder
  3. gulp build or gulp deploy

You should have your own version of the Classic Theme.

Michael
  • 101
  • 4
  • The link is going to a 404 – Yahia Dec 31 '19 at 14:53
  • The new link is https://github.com/liferay/liferay-portal/tree/7.2.x/modules/apps/frontend-theme/frontend-theme-classic/src – Yahia Dec 31 '19 at 15:03
  • Do you know if there's a way to do the same with Developer Studio ? - here is the link where I started from: https://help.liferay.com/hc/en-us/articles/360018158891-Creating-Themes-with-Liferay-Developer-Studio- – Victor Feb 24 '21 at 12:42
0

I am facing a similar problem while triying to extend classic theme(even if it s not recomended), but with the new Style book capabilities of liferay it's a good opportunity for us to speed up our theme creartion.

I have created a basic theme project using "yo liferay-theme" generator build my theme and deploy it, everythings OK. Then i downloaded the necessary files from lifery frontend-theme-classic github repo : [https://github.com/liferay/liferay-portal/tree/7.3.x/modules/apps/frontend-theme/frontend-theme-classic][1] [1]: https://github.com/liferay/liferay-portal/tree/7.3.x/modules/apps/frontend-theme/frontend-theme-classic i add the folders : css, images, templates and some necessary changes under the WEB-INF directory. When i run gulp build i got an error about undefined variables :

Starting 'build:compile-lib-sass'... [23:21:28] 'build:compile-lib-sass' errored after 1.94 s [23:21:28] Error in plugin 'gulp-sass' Message: build_css\custom_properties_custom_properties_variables.scss Error: Undefined variable: "$btn-link". on line 10 of build/_css/custom_properties/_custom_properties_variables.scss from line 1 of build/_css/_custom_properties.scss from line 13 of build/_css/_custom.scss from line 21 of build/_css/main.scss

         link: $btn-link,

--------^

Details: status: 1 file: C:/Users/sgFSJESO/ump-theme/build/_css/custom_properties/_custom_properties_variables.scss line: 10 column: 9 formatted: Error: Undefined variable: "$btn-link". on line 10 of build/_css/custom_properties/_custom_properties_variables.scss from line 1 of build/_css/_custom_properties.scss from line 13 of build/_css/_custom.scss from line 21 of build/_css/main.scss

         link: $btn-link,

If anyone has solved this issues i would be happy to understand why.

mohamed abdelbassat Salhi
  • 39
  • 5