New theme with latest bootstrap

[Abhed Dekavadiya, modifié il y a 10 années.]

Hi,

I want to create a new theme in Liferay 6.2.0 (or 6.2.1) with latest bootstrap css and js features. I need to include the related css and js files from bootstrap into the theme and from there they'll be accessed by multiple portlets also. Portlets are created in Spring MVC. Liferay uses bootstrap-v2.3.2 and I want to use bootstrap-v-3.1.1.

Now when I include the css and js from bootstrap, it breaks the UI of Liferay. Like I lost dockbar. Also I have some admin portlets, which will be available in control panel. For such portlets I tried by copying the bootstrap css and js files in the portlet, but then it breaks control panel UI.

Is there a way where I can switch off the bootstrap used by Liferay and have only my bootstrap files loaded through my custom theme ?

I found that in aui.css it loads the bootstrap css through this import

@import "aui/bootstrap";

. I tried by removing the same, but still no success.

The reason for me to use the bootstrap files is that Liferay has integrated the bootstrap's old version with AUI and that's also not complete (like many JS modules are not there). Also Liferay has re-written some of the JS modules in AUI for their counterpart in bootstrap js, but I don't want to use AUI.

Did anyone try this already ?
Any suggestions or directions to move forward will be really helpful.

Thanks in advance!

Kind Regards,
Abhed Dekavadiya

[Ryan Schuhler, modifié il y a 10 années.]

This blog post and this forum post might answer a few of your questions.

[M J, modifié il y a 10 années.]

You cannot use any other bootstrap version with Liferay 6.2. It works only with bootstrap 2.3.2 (aui) that comes with Liferay 6.2. Even, original bootstrap 2.3.2 wouldn't work with Liferay 6.2. YES, Liferay 6.2 theme was instantly outdated as soon as it was released. Because, rest of the world was using Bootstrap 3.x. I can understand your pain.

[James Barwick, modifié il y a 8 années.]

M J:

You cannot use any other bootstrap version with Liferay 6.2. It works only with bootstrap 2.3.2 (aui) that comes with Liferay 6.2. Even, original bootstrap 2.3.2 wouldn't work with Liferay 6.2. YES, Liferay 6.2 theme was instantly outdated as soon as it was released. Because, rest of the world was using Bootstrap 3.x. I can understand your pain.

Not only that, just look at the next 20 or so (or 50 or so) commits to bootstrap GIT repo after the 2.3.2 tag.....some commits and code changes are interesting....

Someone said to use _unstyled and then we can create a fully bootstrap 3 theme. Though... I don't relish the idea of having to rewrite the entire portal.

But, perhaps it could work for a sub-site.

If Liferay doesn't want to get rid of IE6, IE7, IE8, and other Internet Explorer junk, (bootstrap 3 minimum is ID11, right?)...

For those that want to support IE9 with bootstrap, just try :

<!--[if lt IE 9]>
 <script src="/js/html5shiv.js" type="text/javascript"></script>
 <script src="/js/respond.min.js" type="text/javascript"></script>
<![endif]-->

.

you can download the JS from
https://code.google.com/p/html5shiv
https://github.com/scottjehl/Respond

Enjoy.

[David H Nebinger, modifié il y a 8 années.]

Forgive me if I'm wrong, but I think there's a bootstrap 3 theme available in the marketplace...

[David Proba, modifié il y a 8 années.]

Yes, there are some themes in the marketplace based on BS.... Well, actually I can't say if they are really BS3 as I did not try them.
Using it with custom plugins should be fine. But - the tricky part is to use a BS theme with your existing portal.
BS3 is not backwards compatible because there were changes in the markup (http://getbootstrap.com/migration/), so, if you want to use BS3 with Liferay 6.2, you have to change the markup in the portal, which means hooking the complete portal.
That's why I would say.... don't do it ;-)