How to edit classic theme in Liferay 7.2?

Question

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

Answer 1

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.

Answer 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.