Blogs

Hi again!

This is the second (and last) part of my blog series for using existing Bootstrap themes into Liferay 6.2. In my previous blog post I talked about using LESS files, and how to, by simply changing some text strings, make it useful for a Liferay theme.

In this post I'll tell you how to use two of the available Bootstrap theme generators. So, as you may have noticed, you don't even have to know about bootstrap development for creating your own customizing themes after reading this post. Looks good, isn't it? 

As what it seems, the bootstrap generators creates a complete bootstrap css file. This means that the downloaded css is ready to use, and we have to override the bootstrap css file that is included in Liferay with this one. This shouldn't cause any big issue in our theme if we are using Bootstrap 2.3.2, but, as we will see later, it's advisable to make some adjustments in our theme to make it work perfectly fine.

Hint: you can use these steps when having this text in its css header:

 * Bootstrap v2.3.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.

• Bootstrap Magic
• BootswatchR

BOOTSTRAP MAGIC

In order to create themes from scratch, we are going to start with Bootstrap Magic theme generator (http://pikock.github.io/bootstrap-magic/2.3.2/app/index.html).

For testing purposes, we are going to change some colour (of course you can customize whatever variable you want). Select a different color in “Scaffolding” section, @linkColor variable, and click in “Apply” at the bottom of the page (in my case, I chose green colour):

Then, as we did in the previous blog post, change path for icons:

Then, just click in “Save CSS” and your css file will be downloaded.

Now we can create our Liferay theme as always, using _styled as a parent template. For overrriding Liferay bootstrap css, we have to create this file in theme directory:

• _diffs/css/aui.css

and copy/paste the contents from the downloaded file there.

Now remove this string text ocurrences from _diff/css/aui.css_

http://pikock.github.io/bootstrap-magic/2.3.2/twitter-bootstrap/less/

So far so good! Unfortunately, the generated css seems to not adjust portlets properly when resizing, among with other issues:

How to solve this? Alloy-bootstrap to the rescue! 

Hint: you can use css from alloy-bootstrap project for adjusting your own bootstrap themes if there is any css issue in Liferay.

For overriding the responsive css part, and for future maintenance, we are going to create another file in theme:

• _diffs/css/custom.css

In this file we are going to paste content from alloy responsive css file (https://github.com/liferay/alloy-bootstrap/blob/v2.2.2/lib/_responsive-767px-max.scss). Content would be as follows:

img {
 /* Responsive images (ensure images don't scale beyond their parents) */
 max-width: 100%;
 /* Part 1: Set a maxium relative to the parent */
 width: auto\9;
 /* IE7-8 need help adjusting responsive images */
 height: auto;
 /* Part 2: Scale the height according to the width, otherwise you get stretching */
 vertical-align: middle;
 border: 0;
 -ms-interpolation-mode: bicubic;
}

@media ( max-width : 767px) {
 .aui body {
   padding-left: 20px;
   padding-right: 20px;
 }

 .aui .navbar-fixed-top,.aui .navbar-fixed-bottom,.aui .navbar-static-top
   {
   margin-left: -20px;
   margin-right: -20px;
 }

 .aui .container-fluid {
   padding: 0;
 }

 .aui .dl-horizontal dt {
   float: none;
   clear: none;
   width: auto;
   text-align: left;
 }
 .aui .dl-horizontal dd {
   margin-left: 0;
 }
 .aui .container {
   width: auto;
 }
 .aui .row-fluid {
   width: 100%;
 }
 .aui .row,.aui .thumbnails {
   margin-left: 0;
 }
 .aui .thumbnails>li {
   float: none;
   margin-left: 0;
 }
 .aui [class*="span"],.aui .uneditable-input[class*="span"],.aui .row-fluid [class*="span"]
   {
   float: none;
   display: block;
   width: 100%;
   margin-left: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }

 .aui .span12,.aui .row-fluid .span12 {
   width: 100%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 .aui .row-fluid [class*="offset"]:first-child {
   margin-left: 0;
 }
 .aui .input-large,.aui .input-xlarge,.aui .input-xxlarge,.aui input[class*="span"],.aui select[class*="span"],.aui textarea[class*="span"],.aui .uneditable-input
   {
   display: block;
   width: 100%;
   min-height: 30px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 .aui .input-prepend input,.aui .input-append input,.aui .input-prepend input[class*="span"],.aui .input-append input[class*="span"]
   {
   display: inline-block;
   width: auto;
 }
 .aui .controls-row [class*="span"]+[class*="span"] {
   margin-left: 0;
 }
 .aui .modal {
   position: fixed;
   top: 20px;
   left: 20px;
   right: 20px;
   width: auto;
   margin: 0;
 }
 .aui .modal.fade {
   top: -100px;
 }
 .aui .modal.fade.in {
   top: 20px;
 }
}

We can make other adjustments as well. For example, remove the icon showing next to portlet title, by adding this css snippet into _diffs/css/custom.css:

.aui .portlet-topper .portlet-title i,.aui .portlet-topper .portlet-title span img
 {
 display: none;
}

.hide-accessible {
 clip: rect(0, 0, 0, 0) !important;
 position: absolute !important;
 -webkit-transform: scale(0);
 -webkit-transform-origin-x: 0px;
 -webkit-transform-origin-y: 0px;
 *position: fixed !important;
 _position: absolute !important;
}

 

Now you can build and deploy your theme. You have now a custom bootstrap theme with your own colour ready to use in Liferay 6.2, Isn't wonderful? 

 

BOOTSWATCHR

This is another great bootstrap theme generator you can find in the Internet, where you can create Bootstrap v.2.3.2 themes.

Simply enter http://bootswatchr.com and click in "Create", which is located at the top of the page. 

Select “New” and then you can start configuring your theme. Before customizing the elements for the theme, you have to change to Bootstrap 2.3 first. For achieve that, select the “Settings” element in upper-left corner, and change the boostrap version, both for “Preview” and “Bootstrap Version” to 2.x and 2.3.2 respectively.

In left panel you’ll see the variables which you can customize for creating your theme. In this case, we can simply change these two variables:

@linkColor:          #<FILL_HERE_YOUR_COLOR>;
@navbarLinkColor:    #<FILL_HERE_YOUR_NAVBAR_COLOR>;

We should change icons path too, so we can use built-in FontAwesome from Liferay:

@iconSpritePath:          "../images/aui/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../images/aui/glyphicons-halflings-white.png";

Any time you change any variable value, you can see how it looks like in the right.

When finished, just click in “Get Css” -> “Full” just next to “Settings” in upper-left corner.

Hope you liked it! Enjoy Liferay theme development.