Using existing Bootstrap themes in Liferay (Part I).
2016-03-25 11:12
645 查看
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
![](https://cdn.lfrs.sl/www.liferay.com/html/js/editor/ckeditor/plugins/smiley/images/teeth_smile.gif)
) 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:
Themes with downloadable LESS files.
Themes with complete bootstrap (v. 2.3.2) CSS.
In this post I'll be explaining the steps for the first point. So here we go!
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):
http://bootswatch.com/2/slate/variables.less
http://bootswatch.com/2/slate/bootswatch.less
After downloading those files, follow these steps:
Create theme using Liferay IDE or SDK command line (styled + Velocity, if using Freemarker you will find this known error: https://issues.liferay.com/browse/LPS-47408).
Create these new files, using _diffs directory as usual:
_diffs/css/_aui_variables.scss
_diffs/css/_aui_custom.scss
Copy content from variables.less into _diffs/css/_aui_variables.scss
Copy content from bootswatch.less into _diffs/css/_aui_custom.scss
Downloaded files are in LESS format. We need to convert them to SASS. There are some rules we can follow easily:https://github.com/m5o/sass-bootstrap/blob/master/README.md#sass-conversion-quick-tips.
Below I write the replacement rules I've followed, using regex patterns and the replacement value.
LESS replacements
Change icon path in _aui_variables.scss:
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:
![](https://www.liferay.com/documents/14/8455421/slate.jpg/16b43f6f-d94f-40bf-97d9-05a933af30dc?t=1405093789228)
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!
![](https://cdn.lfrs.sl/www.liferay.com/html/js/editor/ckeditor/plugins/smiley/images/wink_smile.gif)
Trackback URL:
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
![](https://cdn.lfrs.sl/www.liferay.com/html/js/editor/ckeditor/plugins/smiley/images/teeth_smile.gif)
) 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:
Themes with downloadable LESS files.
Themes with complete bootstrap (v. 2.3.2) CSS.
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 youcan 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):
http://bootswatch.com/2/slate/variables.less
http://bootswatch.com/2/slate/bootswatch.less
After downloading those files, follow these steps:
Create theme using Liferay IDE or SDK command line (styled + Velocity, if using Freemarker you will find this known error: https://issues.liferay.com/browse/LPS-47408).
Create these new files, using _diffs directory as usual:
_diffs/css/_aui_variables.scss
_diffs/css/_aui_custom.scss
Copy content from variables.less into _diffs/css/_aui_variables.scss
Copy content from bootswatch.less into _diffs/css/_aui_custom.scss
Downloaded files are in LESS format. We need to convert them to SASS. There are some rules we can follow easily:https://github.com/m5o/sass-bootstrap/blob/master/README.md#sass-conversion-quick-tips.
Below I write the replacement rules I've followed, using regex patterns and the replacement value.
LESS replacements
Pattern/string to replace | Replacement |
---|---|
@(?!(?:import|media|charset|font-|page|((-(moz|o|ms|webkit)-)?(keyframes|viewport)))) | $ |
spin\( | adjust-hue( |
\.([\w-]+)(?=\() | @include $1 |
#gradient > @include vertical | @include gradient-vertical |
#gradient > @include directional | @include gradient-directional |
&- | Replace with the css class where that element belongs to: (ex.: &-inverse belongs to .navbar, so it should be .navbar-inverse) |
$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:
![](https://www.liferay.com/documents/14/8455421/slate.jpg/16b43f6f-d94f-40bf-97d9-05a933af30dc?t=1405093789228)
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!
![](https://cdn.lfrs.sl/www.liferay.com/html/js/editor/ckeditor/plugins/smiley/images/wink_smile.gif)
Trackback URL:
相关文章推荐
- BootStrap inputag使用
- bootstrap-table + JSON + springmvc使用
- 机器学习基础(十六)—— bootstrap
- Bootstrap_面板
- Bootstrap_列表组
- Bootstrap_媒体对象
- Bootstrap_进度条
- Bootstrap_缩略图
- Bootstrap_警示框
- Bootstrap_标签
- Bootstrap_分页
- Bootstrap_导航条
- Bootstrap_导航
- Bootstrap_按钮工具栏
- Bootstrap_下拉菜单
- Bootstrap 响应式布局模板
- 像bootstrap一样的去做web编程
- bootstrap下使用模态框,在模态框内输入框中回车时,模态框自动关闭的问题及解决方法
- 针对bootstrap内联单选框input与文字不能居中对齐的解决办法
- Bootstrap Table 查询(服务器端)、刷新数据