How to use bootstrap based (non liferay) templates for a liferay portlet

[Saurabh Gawande, geändert vor 9 Jahren.]

Hi,
I am using Liferay 6.2 CE.

I want to use the following bootstrap based admin template (http://almsaeedstudio.com/preview) for my liferay portlet.This is a responsive admin template made using html5, css3, bootstrap libs 3, LESS.

I downloaded this template, created a war file from the project and deployed the war file in tomcat/deploy folder . After starting the tomcat server, this project appeared in tomcat/webapps folder. Later, this project appears in Undefined category in Add -> Applications. If I add this on my sites's page, then it all looks OK.

However, when I create a portlet project, and use the same css and js files from above project in my portlet's WEB-INF , then all alignments , colors ,etc go vary. The console doesn't present any errors.

What might be wrong here ?

I understand that there are some premium admin based responsive templates available for Liferay (for eg: https://www.themeray.com/web/guest/themes/ace), however, its pretty expensive and I am still learning. Is there a way around ? I could not find any free admin based responsive templates for Liferay.

[Juan Gonzalez, geändert vor 9 Jahren.]

Hi Saurabh,

although isn't too complicated, isn't as easy as copy/paste the themes directly.

Maybe these blog entries can give you some good starting points:

https://www.liferay.com/web/juan.gonzalez/blog/-/blogs/using-existing-bootstrap-themes-in-liferay-part-i-

https://www.liferay.com/es/web/juan.gonzalez/blog/-/blogs/using-existing-bootstrap-themes-in-liferay-part-ii-

[Saurabh Gawande, geändert vor 9 Jahren.]

Hello Juan,

Thanks for the links.

However, your example itself doesn't seem to work in my case. May be, I am doing something wrong, my bad !
The theme gets deployed, no errors during deployment. When the theme is applied, everything is misplaced - colors, images, text - everything.

Can you send me those two files (scss files after conversion). May be I can take a diff and see what's going wrong.

Attached are my two files.

Thanks

[Juan Gonzalez, geändert vor 9 Jahren.]

Can you describe the concrete steps you've followed for creating the theme?

[Saurabh Gawande, geändert vor 9 Jahren.]

Sure.

Pretty much followed your blog step by step.

Eclipse -> Create a new plugin project -> Theme -> _styled -> velocity -> copy files in _diffs/css -> replacement -> deploy -> apply the theme.

[Juan Gonzalez, geändert vor 9 Jahren.]

When executing "deploy" ant task, do you see any errors in your Eclipse console? Watch if you see some kind of stacktrace when css is compiled.

[Saurabh Gawande, geändert vor 9 Jahren.]

I use Project -> Liferay -> SDK -> deploy
No errors on Console whatsoever.

[Saurabh Gawande, geändert vor 9 Jahren.]

Could you kindly send me your converted files ?