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.
- In Liferay Devloper Studio, Go to –> File – New – Liferay Plugin Project.
- Provide the Name inside Project Name Text Box (say Test).
- Select the Plugin Type as – Theme and click Next.
- Select Theme parent – _styled and Theme framework – Velocity. Click Finish.
- A new Theme (Test-theme) will be created.
- Inside _diffs folder create css, images, js and templates folder.
- Copy and paste the required files in the corresponding folders as needed.
- Download Bootstrap 3 CSS file and place it inside _diffs – css
- Open Main.css and call the Bootstrap 3 css file above custom.css
- 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; }
Color schemes in liferay theme
Creating a color schemes in liferay will help you to change the look and feel immediately with a CSS class name, which of course also help you to choose different background images, different border colors, and more.
Creating a Color Schemes
Hereās how you can define your color schemes in liferay-look-and-feel.xml:
<theme id="hm-blue" name="HM Blue">
<settings>
<setting key="my-setting" value="my-value" />
</settings>
<color-scheme id="01" name="Blue">
<css-class>blue</css-class>
<color-scheme-images-path>
${images-path}/color_schemes/${css-class}
</color-scheme-images-path>
</color-scheme>
<color-scheme id="02" name="Grey">
<css-class>grey</css-class>
</color-scheme>
</theme>
Create a color_schemes folder inside your _diffs/css folder, and place a .css file in it for each color scheme. we can have either one file called grey.css or we can use both blue.css and grey.css to specify each scheme. Letās use the better option here, creating both files to define our color schemes.
Place the following lines at the bottom of your custom.css file:
@import url(color_schemes/blue.css);
@import url(color_schemes/grey.css);
The color scheme CSS class is placed on the <body> element, so you can use it to identify your styling. In blue.css, prefix all your CSS styles like this:
body.blue { background-color: #0000FF; }
.blue a { color: #fff; }
In grey.css, prefix all your CSS styles like this:
body.grey{ background-color: #E4E4E4;; color: #000; }
.grey a { color: #000; }
You can create separate thumbnail images for your color schemes. The element tells Liferay where to look for these images (you only have to place this element in one color scheme for it to affect both). For our example, create the folders _diffs/images/color_schemes/blue and_diffs/images/color_schemes/grey. In each folder place a thumbnail.png and screenshot.png file, according to the specifications defined in the Thumbnails section in Liferay Theme.