Using existing Bootstrap themes in Liferay (Part I).
From :?https://www.liferay.com/web/juan.gonzalez/blog/-/blogs/using-existing-bootstrap-themes-in-liferay-part-i- Yes,it's true?bootstrap?give us a lot of improvements for creating themes. And is also true that since Liferay 6.2 we can take advantage of all this useful tools for developing your own themes in Liferay. Looking for developing my own themes for some personal portals (yes,I like developing in Liferay in my free time too? )?without being a frontend developer seemed more less complicated. Although there were?some attempts for explaining it,the steps were not clear enough for a bootstrap newbie like me.After some investigation (and with the help from?Nate Cavanaugh,?Ilyan Peychev?and?Chema Balsas,thanks very much mates!) I could finally put all pieces together and create some steps for integrating an existing bootstrap theme into Liferay sucessfully. So after reading this 2-part blog series you would be able to get any already developed bootstrap theme and use it in Liferay. In fact,I used some of the existing bootstrap themes showcases and generators. As what I've seen round there,there are two types of themes from bootstrap showcases/generators:
In this post I'll be explaining the steps for the first point. So here we go! Themes from LESS files (http://bootswatch.com/2/)When searching for bootstrap themes,you probably found?bootswatch?as one of the first results. It has some free themes and many themes for purchasing. As you can see just after opening the page,you are selecting Bootstrap v.2. This is required for Liferay 6.2,as?it uses Bootstrap 2.3.2. But there are good news. Next Liferay version?will be compatible with Bootstrap v3,?although you have to stay with v.2.3.2 until new version is out. Just choose one of your free or purchased theme,and download the variables.less and bootswatch.less files (in my case,I've chosen "Slate" free theme):
After downloading those files,follow these steps:
$iconSpritePath: "../images/aui/glyphicons-halflings.png"; $iconWhiteSpritePath: "../images/aui/glyphicons-halflings-white.png"; ? Then,after executing "ant deploy" (or using Liferay IDE) your theme should deploy properly and result,if you chose the same theme as me,should be like following: ?
? Looks good,isn't it? As you can see,you can have a bootstrap theme as a Liferay theme in only few minutes! That's all for now! In next blog post I'll be showing how to generate a custom bootstrap theme from scratch using some of the available generators existing in Internet,and use it as a Liferay theme. Hope you liked it,stay tuned!? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |