Oliver Bayer Il y a 10 années 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)? Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
James Falkner Il y a 10 années 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. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Nate Cavanaugh Il y a 10 années Awesome, thanks guys, I've gone ahead and corrected Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Thiago Leão Moreira Il y a 10 années 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? Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Nate Cavanaugh Il y a 10 années 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, Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Thiago Leão Moreira Nate Cavanaugh Il y a 10 années Ok, thanks. I'll give a try. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Thiago Leão Moreira Nate Cavanaugh Il y a 10 années Ok, thanks. I'll give a try. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Jorge Ferrer Il y a 10 années Awesome post Nate! Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Cordell Bourne Il y a 10 années 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? Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Nate Cavanaugh Cordell Bourne Il y a 10 années 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 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Thiago Leão Moreira Nate Cavanaugh Il y a 10 années Hey Nate, beyond the hook are we planning to upgrade to Bootstrap 3 in which version of Liferay? 7.0? Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Nate Cavanaugh Thiago Leão Moreira Il y a 10 années 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. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Thiago Leão Moreira Nate Cavanaugh Il y a 10 années That's great, thanks! Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Paul M Nate Cavanaugh Il y a 9 années Hi,Has there been any indication of when the "hook" to use Bootstrap 3 might become available?Thank you Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Nate Cavanaugh Cordell Bourne Il y a 10 années 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 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Thiago Leão Moreira Nate Cavanaugh Il y a 10 années Hey Nate, beyond the hook are we planning to upgrade to Bootstrap 3 in which version of Liferay? 7.0? Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Nate Cavanaugh Thiago Leão Moreira Il y a 10 années 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. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Thiago Leão Moreira Nate Cavanaugh Il y a 10 années That's great, thanks! Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Paul M Nate Cavanaugh Il y a 9 années Hi,Has there been any indication of when the "hook" to use Bootstrap 3 might become available?Thank you Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Thiago Leão Moreira Nate Cavanaugh Il y a 10 années Hey Nate, beyond the hook are we planning to upgrade to Bootstrap 3 in which version of Liferay? 7.0? Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Nate Cavanaugh Thiago Leão Moreira Il y a 10 années 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. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Thiago Leão Moreira Nate Cavanaugh Il y a 10 années That's great, thanks! Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Paul M Nate Cavanaugh Il y a 9 années Hi,Has there been any indication of when the "hook" to use Bootstrap 3 might become available?Thank you Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Nate Cavanaugh Thiago Leão Moreira Il y a 10 années 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. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Thiago Leão Moreira Nate Cavanaugh Il y a 10 années That's great, thanks! Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Paul M Nate Cavanaugh Il y a 9 années Hi,Has there been any indication of when the "hook" to use Bootstrap 3 might become available?Thank you Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Thiago Leão Moreira Nate Cavanaugh Il y a 10 années That's great, thanks! Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Paul M Nate Cavanaugh Il y a 9 années Hi,Has there been any indication of when the "hook" to use Bootstrap 3 might become available?Thank you Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Muhammed Shakir AK Misarwala Il y a 10 années 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 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Muhammad Umer Zubair Muhammed Shakir AK Misarwala Il y a 10 années Salam Muhammad Shakir,Have you integrated Bootstrap 3 with Liferay 6.2 or 6.1? Thanks Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Muhammed Shakir Muhammad Umer Zubair Il y a 9 années Apologies for delayed reply. It is on 6.2 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Adari Hindu Muhammed Shakir Il y a 9 années 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 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Muhammad Umer Zubair Muhammed Shakir AK Misarwala Il y a 10 années Salam Muhammad Shakir,Have you integrated Bootstrap 3 with Liferay 6.2 or 6.1? Thanks Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Muhammed Shakir Muhammad Umer Zubair Il y a 9 années Apologies for delayed reply. It is on 6.2 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Adari Hindu Muhammed Shakir Il y a 9 années 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 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Muhammed Shakir Muhammad Umer Zubair Il y a 9 années Apologies for delayed reply. It is on 6.2 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Adari Hindu Muhammed Shakir Il y a 9 années 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 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Adari Hindu Muhammed Shakir Il y a 9 années 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 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Prasanna Raj Il y a 10 années 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. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Joseph Toman Il y a 10 années 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. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Nate Cavanaugh Joseph Toman Il y a 10 années 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? Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Joseph Toman Nate Cavanaugh Il y a 10 années 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. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Nate Cavanaugh Joseph Toman Il y a 10 années 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? Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Joseph Toman Nate Cavanaugh Il y a 10 années 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. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Joseph Toman Nate Cavanaugh Il y a 10 années 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. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Chris Becker Il y a 10 années 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. Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
vishwanath s Il y a 9 années 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? Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Kushal Jayswal Il y a 9 années Hi Nate,Is it possible to use Twitter Bootstrap JS component inside Liferay? Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Javier Lamadrid Il y a 9 années 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 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Sean Gildea Il y a 9 années 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". Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Sean Gildea Il y a 9 années 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 ) Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Nate Cavanaugh Sean Gildea Il y a 9 années 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 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Javier Lamadrid Nate Cavanaugh Il y a 9 années 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 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Nate Cavanaugh Sean Gildea Il y a 9 années 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 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler Javier Lamadrid Nate Cavanaugh Il y a 9 années 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 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Javier Lamadrid Nate Cavanaugh Il y a 9 années 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 Veuillez vous identifier pour voter. Répondre en tant que ... Annuler
Alexis Piéplu Il y a 9 années 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? Veuillez vous identifier pour voter. Répondre en tant que ... Annuler