5

I'm working with Bootstrap 3 in Liferay 6.2. I inserted the bootstrap.css and bootstrap.min.js in the CSS and JS. I've also changed some style in my custom.css incompatilibilidad

Do you have a better idea of ​​it?

Then I attached the steps I followed to insert Bootstrap 3 in my Liferay 6.2. Well above gives me a few compatibility issues ... I would like your opinion, for eg if a more optimal code to work with these tools and these versions. I need your help to improve this and that everyone can work with Bootstrap 3 in Liferay 6.2. This is my two cents.

STEPS:

1 - Put the Bootstrap CSS, JS, and fonts in _diffs directory folder inside your theme

2 - We open or create the main.css file and make a call to the file Bootstrap.css

3 - On the portal_normal.vm add two calls to JavaScript with the name shown in the above scheme.

4 - We insert in custom.css CSS classes that conflict with the version 2.3.2 default one Liferay

--- custom.css ---

.signed-in .collapse {  display:block;  } 
.lfr-edit-layout-panel .collapse{  display:block; } 
.dockbar.navbar-static-top .collapse {      display: block;  } 
.navbar-inner .collapse{     display:block;   } 
.dockbar-ready section#content {    padding: 0 0 0 0;  }
 
.dockbar.navbar-static-top {
  background-color: transparent;
  padding: 0px;
}
.dockbar-messages{  display:none; }
 
.lfr-device-preview{  z-index: 1000;  }
 
.modal{   display:block; }
 
.modal-hidden{ display:none; }
ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
JMF
  • 1,083
  • 7
  • 17
  • What's your question? – Alvaro Silvino Feb 16 '16 at 15:39
  • 2
    Hello @AlvaroJoao ! It was not a question but an answer to how. It's hard work issues Liferay 6.2 Bootstrap 3 incompatilibidad problems. Here I show how it is possible to combine both. I'm doing a theme seamlessly with Bootstrap 3 in Liferay 6.2. Greetings friend. Thanks from Spain – JMF Feb 17 '16 at 08:23

1 Answers1

1

What do you think of this one:

" You need to do some tricks to make parts of bootstrap 3 work within liferay.

I have worked with a designer who really wanted to have bootstrap 3 in some parts of liferay..

Here is hoe I have done it: On the theme project, into the css file, I copied the bootstrap libraries. On that folder I created a scss file with the following code:

.bootstrap-3 { @import "bootstrap"; }

where the bootstrap indicates a file to be included, according to the scss rules: _bootstrap.scss which was basically a file made from the original css.

The trick is to work with namespaces wherever you need to use the library.

When calling AJAX content, we just need to add the class.. some times the CSS rules get trickier due to the amount of classes and id liferay uses, but paying with priorities should solve..

I rather use this approach as it is easier to control conflicts with the original library..."

Victor
  • 3,520
  • 3
  • 38
  • 58
  • Interesting...!! The call to .bootstrap-3 {@import "bootstrap";} put her in the custom? I tell you: do not give me my problems but I can not use the ROW .. just let me use row-fluid thereby creating me 15 px of other space @victor – JMF Mar 18 '16 at 07:50
  • I guess you can put it on custom, I created a new css and added on the templates that needed. This will create a new namespace, and by adding the .bootstrap-3 to the elements that need, you will be able to use your logic. I like this way better, cause in Liferay there is a lot of stuff that depends on the old bootstrap, and you probably do not want to mess with it. you can add to the parent elements, and see if its enough.. just keep in mind that liferay adds lots of classes, in seveal layers, so if this does not solve, it is probably a priority problem - you can be creative with those.. – Victor Mar 18 '16 at 20:17
  • We use this with good results here. Specially because we do not control all developers that build for the system, and some like v3. let me know how it goes. – Victor Mar 18 '16 at 20:18