Month: November 2015

November 28, 2015

Bootstrap 3 with Liferay 6.2

In Current Liferay version 6.2 we have bootstrap 2.3.2 as default theme library.Bootstrap 3 was released on August 19th, 2013, before releasing Liferay 6.3. Bootstrap 3 completely dropped support for IE7 and below. While Liferay 6.2 provided limited support for IE7 and below. So here are some of the distinctive differences between Bootstrap v2.3 and v3.0:

Bootstrap 3

Bootstrap 2.3.2
Grids: Fluid (480px, 768px, 992px, 1200px) Flat Design: Gradients are no longer available in V3.0
Grids: Fluid and fixed (724px, 940px, 1170px; below 768px are single column and vertically stacked) CSS3 gradients and box shadows
Columns Classes: .col-xs-1, .col-sm-1 .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2 .col-md-2, .col-lg-2 .span1,.span2

For know more in detail please go to this link:- http://getbootstrap.com/migration/

Creating Theme with Bootstrap 3 in Liferay 6.2

These are some basic steps for creating Theme with Bootstrap 3. In some of the steps are same except few additional Steps.

  1. In Liferay Devloper Studio, Go to –> File – New – Liferay Plugin Project.
  2. Provide the Name inside Project Name Text Box (say Test).
  3. Select the Plugin Type as – Theme and click Next.
  4. Select Theme parent – _styled and Theme framework – Velocity. Click Finish.
  5. A new Theme (Test-theme) will be created.
  6. Inside _diffs folder create css, images, js and templates folder.
  7. Copy and paste the required files in the corresponding folders as needed.
    1. Download Bootstrap 3 CSS file and place it inside _diffs – css
    2. Open Main.css and call the Bootstrap 3 css file above custom.css
  8. Modify the files as explained.

Liferay 6.2 Basic Structure: [Two Column Layout]

<div  id="main-content" role="main">
<div class="portlet-layout row-fluid">
        <div class="span6 portlet-column portlet-column-first" id="column-1">
            $processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
        </div>
      <div class="span6 portlet-column portlet-column-last" id="column-2">
            $processor.processColumn("column-2", "portlet-column-content portlet-column-content-last")
        </div>
    </div>
</div>

These are the some comman classes who are conflict with Bootstarp 2.3 in liferay 6.2.

.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 #wrapper {    margin-top: 149px; }
.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; }