Oliver Bayer 10年 前 Hi Nate,this is a great sum-up of the upcoming changes. But I think there is a little typo ;)./* will only style tablet and desktop displays greater than 768px */@include respond-to(phone, tablet) {Shouldn't it be respond-to(dektop,tablet)? 投票するためにはログインが必要です。 次として送信する: キャンセル
James Falkner 10年 前 Hey Nate, awesome post! I think some of this will need to find its way into the dev docs (esp. the part about needing an aui.css - unless I missed it).One other thing - I think one of your code snippets left off "$FontAwesomePath: "aui/alloy-font-awesome/font" !default;" as the first line. 投票するためにはログインが必要です。 次として送信する: キャンセル
Nate Cavanaugh 10年 前 Awesome, thanks guys, I've gone ahead and corrected 投票するためにはログインが必要です。 次として送信する: キャンセル
Thiago Leão Moreira 10年 前 Hey Nate, you mentioned a default theme, is there a default theme or just _unstyled, _styled and classic? How did you build the last two screenshots? 投票するためにはログインが必要です。 次として送信する: キャンセル
Nate Cavanaugh 10年 前 Heya Thiago,The theme in the last two pics is _styled If you just create a theme, by default it extends from _styled, so without any changes that's what it looks like. HTH, 投票するためにはログインが必要です。 次として送信する: キャンセル Thiago Leão Moreira Nate Cavanaugh 10年 前 Ok, thanks. I'll give a try. 投票するためにはログインが必要です。 次として送信する: キャンセル
Thiago Leão Moreira Nate Cavanaugh 10年 前 Ok, thanks. I'll give a try. 投票するためにはログインが必要です。 次として送信する: キャンセル
Cordell Bourne 10年 前 Good summary of the why bootstrap 2.3.2. I can completely agree with not inserting bootstrap 3.0 in the later stage of the development cycle. I am not sure that I agree with the IE 7 issue. With IE 7 now at less than 1% use world wide (according to multiple browser tracking sites), this does not seem to be a reasonable course of action. Our company development efforts, as far as browser support is concerned, now simply looks to have stated support for the current version and one back. This is pretty hard to do now with the rapid release cycles of Firefox and Chrome, but it does provide a message to our customer base that the current browsers are going to provide them the best web experience.So, if someone wants to replace to Bootstrap 3, in their environment, should they go ahead now, or wait for an update to 6.2 that could include it? 投票するためにはログインが必要です。 次として送信する: キャンセル Nate Cavanaugh Cordell Bourne 10年 前 Hi Cordell,Thanks for your response.About IE7, I have a few thoughts on that part.First, I am genuinely happy for you that you are able to limit support down to the current and latest browser. I think progressive (more timid souls may even say aggressive) support policies like that really help push the web forward.That being said, there were a couple of factors that push us towards still including it as part of limited support is that while IE7 support is less than 1% amongst the general population, there are still many enterprise deployments that are relying on it.It's simple enough to tell individual users "Upgrade your browser", but when an IT department is looking at upgrading hundreds of thousands of users, retraining those users for a new browser, etc, it's not as simple as just making them upgrade.The situation is even more problematic in the Asian markets, where IE 6 & 7 usage in enterprises is still pretty strong.So for us, we're always trying to find that balance of moving the web forward and still helping IT departments (and the people in them and at their mercy) accomplish their business goals.Now, to your question, we can't just push out Bootstrap 3 as an update to Liferay 6.2. Changing a core piece of infrastructure on users as part of an update like that is an easy way to make a lot of normally nice folks really angry The upgrade to Bootstrap 3 is relatively simple, there are still a lot of places throughout the portal that rely on the old css classes and markup.For instance, if you look at http://code.divshot.com/bootstrap3_upgrader/ You'll see there are multiple pieces that were changed and any third-party app may rely on those patterns still being there.What we're hoping to do is to release a hook in the marketplace that upgrades the default theme as well as all of the pieces throughout the portal to reflect the changes in Bootstrap 3.We're still working through the details on this hook but we'll let everyone know when it becomes available.You could attempt to do it yourself, but beware all of the pieces (including the taglibs) that rely on the Bootstrap 2 way of doing things (specifically the layout classes, that would be a big one).Thanks again for your comment Cordell 投票するためにはログインが必要です。 次として送信する: キャンセル Thiago Leão Moreira Nate Cavanaugh 10年 前 Hey Nate, beyond the hook are we planning to upgrade to Bootstrap 3 in which version of Liferay? 7.0? 投票するためにはログインが必要です。 次として送信する: キャンセル Nate Cavanaugh Thiago Leão Moreira 10年 前 Yeah, that seems to be the plan. It will be at least 3.0, but depending on what's released from Bootstrap till the release, and when the 7.0 release is, we'll try to aim for the latest stable branch. 投票するためにはログインが必要です。 次として送信する: キャンセル Thiago Leão Moreira Nate Cavanaugh 10年 前 That's great, thanks! 投票するためにはログインが必要です。 次として送信する: キャンセル Paul M Nate Cavanaugh 9年 前 Hi,Has there been any indication of when the "hook" to use Bootstrap 3 might become available?Thank you 投票するためにはログインが必要です。 次として送信する: キャンセル
Nate Cavanaugh Cordell Bourne 10年 前 Hi Cordell,Thanks for your response.About IE7, I have a few thoughts on that part.First, I am genuinely happy for you that you are able to limit support down to the current and latest browser. I think progressive (more timid souls may even say aggressive) support policies like that really help push the web forward.That being said, there were a couple of factors that push us towards still including it as part of limited support is that while IE7 support is less than 1% amongst the general population, there are still many enterprise deployments that are relying on it.It's simple enough to tell individual users "Upgrade your browser", but when an IT department is looking at upgrading hundreds of thousands of users, retraining those users for a new browser, etc, it's not as simple as just making them upgrade.The situation is even more problematic in the Asian markets, where IE 6 & 7 usage in enterprises is still pretty strong.So for us, we're always trying to find that balance of moving the web forward and still helping IT departments (and the people in them and at their mercy) accomplish their business goals.Now, to your question, we can't just push out Bootstrap 3 as an update to Liferay 6.2. Changing a core piece of infrastructure on users as part of an update like that is an easy way to make a lot of normally nice folks really angry The upgrade to Bootstrap 3 is relatively simple, there are still a lot of places throughout the portal that rely on the old css classes and markup.For instance, if you look at http://code.divshot.com/bootstrap3_upgrader/ You'll see there are multiple pieces that were changed and any third-party app may rely on those patterns still being there.What we're hoping to do is to release a hook in the marketplace that upgrades the default theme as well as all of the pieces throughout the portal to reflect the changes in Bootstrap 3.We're still working through the details on this hook but we'll let everyone know when it becomes available.You could attempt to do it yourself, but beware all of the pieces (including the taglibs) that rely on the Bootstrap 2 way of doing things (specifically the layout classes, that would be a big one).Thanks again for your comment Cordell 投票するためにはログインが必要です。 次として送信する: キャンセル Thiago Leão Moreira Nate Cavanaugh 10年 前 Hey Nate, beyond the hook are we planning to upgrade to Bootstrap 3 in which version of Liferay? 7.0? 投票するためにはログインが必要です。 次として送信する: キャンセル Nate Cavanaugh Thiago Leão Moreira 10年 前 Yeah, that seems to be the plan. It will be at least 3.0, but depending on what's released from Bootstrap till the release, and when the 7.0 release is, we'll try to aim for the latest stable branch. 投票するためにはログインが必要です。 次として送信する: キャンセル Thiago Leão Moreira Nate Cavanaugh 10年 前 That's great, thanks! 投票するためにはログインが必要です。 次として送信する: キャンセル Paul M Nate Cavanaugh 9年 前 Hi,Has there been any indication of when the "hook" to use Bootstrap 3 might become available?Thank you 投票するためにはログインが必要です。 次として送信する: キャンセル
Thiago Leão Moreira Nate Cavanaugh 10年 前 Hey Nate, beyond the hook are we planning to upgrade to Bootstrap 3 in which version of Liferay? 7.0? 投票するためにはログインが必要です。 次として送信する: キャンセル Nate Cavanaugh Thiago Leão Moreira 10年 前 Yeah, that seems to be the plan. It will be at least 3.0, but depending on what's released from Bootstrap till the release, and when the 7.0 release is, we'll try to aim for the latest stable branch. 投票するためにはログインが必要です。 次として送信する: キャンセル Thiago Leão Moreira Nate Cavanaugh 10年 前 That's great, thanks! 投票するためにはログインが必要です。 次として送信する: キャンセル Paul M Nate Cavanaugh 9年 前 Hi,Has there been any indication of when the "hook" to use Bootstrap 3 might become available?Thank you 投票するためにはログインが必要です。 次として送信する: キャンセル
Nate Cavanaugh Thiago Leão Moreira 10年 前 Yeah, that seems to be the plan. It will be at least 3.0, but depending on what's released from Bootstrap till the release, and when the 7.0 release is, we'll try to aim for the latest stable branch. 投票するためにはログインが必要です。 次として送信する: キャンセル Thiago Leão Moreira Nate Cavanaugh 10年 前 That's great, thanks! 投票するためにはログインが必要です。 次として送信する: キャンセル Paul M Nate Cavanaugh 9年 前 Hi,Has there been any indication of when the "hook" to use Bootstrap 3 might become available?Thank you 投票するためにはログインが必要です。 次として送信する: キャンセル
Paul M Nate Cavanaugh 9年 前 Hi,Has there been any indication of when the "hook" to use Bootstrap 3 might become available?Thank you 投票するためにはログインが必要です。 次として送信する: キャンセル
Muhammed Shakir AK Misarwala 10年 前 Hi Nate & Others,Liferay product and the entire team - is awesome. I have successfully set Bootstrap 3 based theme purchased from bootstrapwrap. Check it out - mslearningandconsulting.com 投票するためにはログインが必要です。 次として送信する: キャンセル Muhammad Umer Zubair Muhammed Shakir AK Misarwala 10年 前 Salam Muhammad Shakir,Have you integrated Bootstrap 3 with Liferay 6.2 or 6.1? Thanks 投票するためにはログインが必要です。 次として送信する: キャンセル Muhammed Shakir Muhammad Umer Zubair 9年 前 Apologies for delayed reply. It is on 6.2 投票するためにはログインが必要です。 次として送信する: キャンセル Adari Hindu Muhammed Shakir 9年 前 Hi its perfectly working in IE8 . but my problem is when i override the bootstrap class at particular device its not working in IE8. For example <div class="span4 services"></div>css file:@media(min-width:1024px){.services{width:33.3% !important;}}. its well working in chrome but not in IE8.i added htmlshiv.js and respond.js and brosercompatibility.js.but there is no use. please give me suggestion. thanks 投票するためにはログインが必要です。 次として送信する: キャンセル
Muhammad Umer Zubair Muhammed Shakir AK Misarwala 10年 前 Salam Muhammad Shakir,Have you integrated Bootstrap 3 with Liferay 6.2 or 6.1? Thanks 投票するためにはログインが必要です。 次として送信する: キャンセル Muhammed Shakir Muhammad Umer Zubair 9年 前 Apologies for delayed reply. It is on 6.2 投票するためにはログインが必要です。 次として送信する: キャンセル Adari Hindu Muhammed Shakir 9年 前 Hi its perfectly working in IE8 . but my problem is when i override the bootstrap class at particular device its not working in IE8. For example <div class="span4 services"></div>css file:@media(min-width:1024px){.services{width:33.3% !important;}}. its well working in chrome but not in IE8.i added htmlshiv.js and respond.js and brosercompatibility.js.but there is no use. please give me suggestion. thanks 投票するためにはログインが必要です。 次として送信する: キャンセル
Muhammed Shakir Muhammad Umer Zubair 9年 前 Apologies for delayed reply. It is on 6.2 投票するためにはログインが必要です。 次として送信する: キャンセル Adari Hindu Muhammed Shakir 9年 前 Hi its perfectly working in IE8 . but my problem is when i override the bootstrap class at particular device its not working in IE8. For example <div class="span4 services"></div>css file:@media(min-width:1024px){.services{width:33.3% !important;}}. its well working in chrome but not in IE8.i added htmlshiv.js and respond.js and brosercompatibility.js.but there is no use. please give me suggestion. thanks 投票するためにはログインが必要です。 次として送信する: キャンセル
Adari Hindu Muhammed Shakir 9年 前 Hi its perfectly working in IE8 . but my problem is when i override the bootstrap class at particular device its not working in IE8. For example <div class="span4 services"></div>css file:@media(min-width:1024px){.services{width:33.3% !important;}}. its well working in chrome but not in IE8.i added htmlshiv.js and respond.js and brosercompatibility.js.but there is no use. please give me suggestion. thanks 投票するためにはログインが必要です。 次として送信する: キャンセル
Prasanna Raj 10年 前 Thanks for this post. Very helpful. However, I'm still not sure how I can use Bootstrap 3 with LR 6.2. Can you please revisit that section or may be throw some light on which section of this article actually speaks about it? Sorry about this, I'm just totally confused with all these new changes in LR. Thanks in advance.Raj. 投票するためにはログインが必要です。 次として送信する: キャンセル
Joseph Toman 10年 前 Thanks for writing this. However, I'm a little confused with regard to your instruction on how to migrate a vanilla bootstrap 2.3.2 theme into Liferay.You said to create an aui.css file. Do you mean create, as in create an empty file or do you mean copy? And if you mean copy then which file should be copied to aui.css? How does the css in the theme's bootstrap.css file get folded in? A little more discussion about this would be greatly appreciated. 投票するためにはログインが必要です。 次として送信する: キャンセル Nate Cavanaugh Joseph Toman 10年 前 Hi Joseph, sorry if that wasn't 100% clear. But basically, what you would do is take your bootstrap.css or whatever theme css file you received and name that aui.css and place it in your _diffs/css directory.The portal looks in every theme's css directory for an aui.css and uses that as it's bootstrap file.Does that help at all? 投票するためにはログインが必要です。 次として送信する: キャンセル Joseph Toman Nate Cavanaugh 10年 前 Yes it does. Thanks. Actually, with nothing better to do I tried that and it sort of worked. The primary navigation seems to use different CSS classes than what's used in Liferay, but I'm sure it can get massaged into working. Thanks again. 投票するためにはログインが必要です。 次として送信する: キャンセル
Nate Cavanaugh Joseph Toman 10年 前 Hi Joseph, sorry if that wasn't 100% clear. But basically, what you would do is take your bootstrap.css or whatever theme css file you received and name that aui.css and place it in your _diffs/css directory.The portal looks in every theme's css directory for an aui.css and uses that as it's bootstrap file.Does that help at all? 投票するためにはログインが必要です。 次として送信する: キャンセル Joseph Toman Nate Cavanaugh 10年 前 Yes it does. Thanks. Actually, with nothing better to do I tried that and it sort of worked. The primary navigation seems to use different CSS classes than what's used in Liferay, but I'm sure it can get massaged into working. Thanks again. 投票するためにはログインが必要です。 次として送信する: キャンセル
Joseph Toman Nate Cavanaugh 10年 前 Yes it does. Thanks. Actually, with nothing better to do I tried that and it sort of worked. The primary navigation seems to use different CSS classes than what's used in Liferay, but I'm sure it can get massaged into working. Thanks again. 投票するためにはログインが必要です。 次として送信する: キャンセル
Chris Becker 10年 前 Thanks, Nate, for this post!I wondered if you be able to shed some light on your team's use of Sass and Compass in the building of the new responsive themes, and how one might go about leveraging those tools in a similar manner for custom theme development.Any roadmap or advice on getting those tools set up for theme work would be of great benefit to anyone looking to build themes for 6.2. 投票するためにはログインが必要です。 次として送信する: キャンセル
vishwanath s 9年 前 I am inheriting the _styled theme for a custom theme of mine.I was getting the dockbar in the old liferay 6.1 style. I then somehow managed to get the split dockbar by making css changes.But now, I'm not getting the icons for the add, preview etc options.Any idea what I need to do to get those icons? 投票するためにはログインが必要です。 次として送信する: キャンセル
Kushal Jayswal 9年 前 Hi Nate,Is it possible to use Twitter Bootstrap JS component inside Liferay? 投票するためにはログインが必要です。 次として送信する: キャンセル
Javier Lamadrid 9年 前 Hi! Great job!I have a theme with Bootstrap3 in Liferay 5.2. The alternatives I see to migrate to 6.2 are: - Downgrade to Bootstrap 2.3- Wait for Liferay 7 - Wait for the hook which is discussed above is it still plans to develop the hook mentioned above?Thanks and regards 投票するためにはログインが必要です。 次として送信する: キャンセル
Sean Gildea 9年 前 I just tried following Nate's instructions on getting Font Awesome working with 6.2. The code he mentions needs to be inside "_diffs/css/aui.css", NOT "_diff/css/custom.css". 投票するためにはログインが必要です。 次として送信する: キャンセル
Sean Gildea 9年 前 Couple helpful tips for people struggling to get Bootstrap going in Liferay 6.2 that weren't exactly clear to me as I startedIf you're implementing a Bootswatch theme in Liferay 6.2, make sure it is version 2.3.2, http://bootswatch.com/2/Next you have to follow the instructions from this separate topic thread which Nate left out completely. https://www.liferay.com/web/juan.gonzalez/blog/-/blogs/using-existing-bootstrap-themes-in-liferay-part-i-That also means that you need to do some conversions with their included sass and less files using a regex tool. I used this free one online. http://www.regexr.com/Basically you have to copy the bootswatch less into that tool above, copy the pattern , and below the substitution is the output which you copy, re-add overwriting the prior change, so on and so forth down Jauns table of changes for both files, following his directions. I mean, this whole topic is a mess, its extremely confusing. I met Nate at the Liferay Symposium in Boston. Nice guy and I'm sure he's busy but they need to prioritize documentation. There is nothing remotely useful on the Liferay Developer Network yet on implementing Bootstrap in 6.2. Hopefully that changes. I'm happy to answer questions to anyone still having problems. ( I'm not paid by Liferay ) 投票するためにはログインが必要です。 次として送信する: キャンセル Nate Cavanaugh Sean Gildea 9年 前 Hi Sean,Thanks for posting your comment, as well as helping others out. Sorry I didn't include the link to the other blog post (though to be fair, it was posted 6 months after mine .Regarding converting the less to sass, one of the guys here wrote this: https://github.com/Robert-Frampton/less-sass-converter which may help a bit.Thanks again for the comment, and it was great meeting you in Boston 投票するためにはログインが必要です。 次として送信する: キャンセル Javier Lamadrid Nate Cavanaugh 9年 前 Hi, Thanks for the replies guys. I see the alternatives. Still makes me sad to have a real theme in an earlier version of Liferay with Bootstrap 3 and having to downgrade: ___ (Thanks again and best regards 投票するためにはログインが必要です。 次として送信する: キャンセル
Nate Cavanaugh Sean Gildea 9年 前 Hi Sean,Thanks for posting your comment, as well as helping others out. Sorry I didn't include the link to the other blog post (though to be fair, it was posted 6 months after mine .Regarding converting the less to sass, one of the guys here wrote this: https://github.com/Robert-Frampton/less-sass-converter which may help a bit.Thanks again for the comment, and it was great meeting you in Boston 投票するためにはログインが必要です。 次として送信する: キャンセル Javier Lamadrid Nate Cavanaugh 9年 前 Hi, Thanks for the replies guys. I see the alternatives. Still makes me sad to have a real theme in an earlier version of Liferay with Bootstrap 3 and having to downgrade: ___ (Thanks again and best regards 投票するためにはログインが必要です。 次として送信する: キャンセル
Javier Lamadrid Nate Cavanaugh 9年 前 Hi, Thanks for the replies guys. I see the alternatives. Still makes me sad to have a real theme in an earlier version of Liferay with Bootstrap 3 and having to downgrade: ___ (Thanks again and best regards 投票するためにはログインが必要です。 次として送信する: キャンセル
Alexis Piéplu 9年 前 Hi! I work like a front-end Developer on Liferay, thank for this blog post.But, I don't see the benefit of your section "Why do all of the Bootstrap rules have .aui in front of them?".1 - If you put the .aui class only on a specific node (like you say, on a portlet), all your administration lost the benefit of bootstrap (no bootstrap style on the admin panel for adding content, on the pop ups). We can't put .aui on an other node.2 - CSS is cascading style sheet, if you are this selector ".aui .btn", he have an bigger priority than this selector ".btn" even if you declare this after. All the styles on aui.css are too strong. All theme style has to be stronger, and it's not really interestingWe built 4 differents websites with this system, this year, and and this "feature" has caused us problems.What we badly understood? 投票するためにはログインが必要です。 次として送信する: キャンセル