February 14, 2023 Harmeet Singh

Step by step guide to create a theme in liferay with Angular Material UI

Liferay theme is a collection of files that define the look and feel of a Liferay portal instance. It includes files such as CSS, JavaScript, images, and templates that control the presentation and layout of the portal’s pages, as well as its overall styling and behavior.

Themes in Liferay can be customized and created from scratch to meet specific design requirements, or they can be based on pre-built templates that are available from the Liferay community or commercial sources. They can also be applied to individual sites or globally to affect the appearance of the entire portal.

In addition to providing a consistent and visually appealing user interface, Liferay themes can also improve the accessibility and usability of a portal, enhance its branding and identity, and help to create a seamless and engaging user experience for visitors and users.

What is Angular Material UI and how it can help building a better UI (User Interface) ?

Material UI is a popular user interface (UI) library for building web applications using Angular, a JavaScript library for building user interfaces. Material UI provides a set of pre-built UI components that follow Google’s Material Design guidelines, which is a design language for creating intuitive and engaging user experiences across platforms and devices.

The library includes components for common UI elements such as buttons, forms, dialogs, navigation, and more. It also provides support for responsive design, accessibility, and internationalization.

Material UI can help to speed up the development process by providing a consistent and visually appealing set of UI components that can be easily customized to fit specific design requirements. It is also widely used and supported by a large community, with regular updates and improvements being made to the library.

Here’s an example of creating Liferay theme with Angular Material UI

1. Create an Angular application using the Angular CLI:

ng new my-app

1	ng new my-app

2. Add Angular Material and the Liferay theme dependencies to the Angular project:

ng add @angular/material
npm install --save-dev liferay-theme-deps liferay-theme-tasks

1 2	ng add @angular/material npm install --save-dev liferay-theme-deps liferay-theme-tasks

3. Use the Liferay Theme Generator to generate a base Liferay theme for Angular, and select Angular Material as the UI framework:

yo liferay-theme:import --includeAngular --includeJSP --includeSass --framework=material

1	yo liferay-theme:import --includeAngular --includeJSP --includeSass --framework=material

4. Customize the theme as needed by modifying the Angular code and using the Liferay theme configuration files. For example, you can modify the styles in the _custom.scss file:

@import "node_modules/@angular/material/theming";
@import "node_modules/liferay-font-awesome-web/css/font-awesome.min.css";

@include mat-core();

// Define your custom theme
$liferay-theme-primary: mat-palette($mat-deep-purple);
$liferay-theme-accent: mat-palette($mat-amber, 600, 800, A200);
$liferay-theme-warn: mat-palette($mat-red);

$liferay-theme-theme: mat-light-theme($liferay-theme-primary, $liferay-theme-accent, $liferay-theme-warn);

// Include Material Design icons from the icon font
$md-icon-font-path: "~@angular/material/prebuilt-themes/indigo-pink/"; // adjust path to match your setup
@import "~@angular/material/prebuilt-themes/indigo-pink/prebuilt-themes.css";

@import "node_modules/@angular/material/theming";

@import "node_modules/liferay-font-awesome-web/css/font-awesome.min.css";

@include mat-core();

// Define your custom theme

$liferay-theme-primary: mat-palette($mat-deep-purple);

$liferay-theme-accent: mat-palette($mat-amber, 600, 800, A200);

$liferay-theme-warn: mat-palette($mat-red);

$liferay-theme-theme: mat-light-theme($liferay-theme-primary, $liferay-theme-accent, $liferay-theme-warn);

// Include Material Design icons from the icon font

$md-icon-font-path: "~@angular/material/prebuilt-themes/indigo-pink/"; // adjust path to match your setup

@import "~@angular/material/prebuilt-themes/indigo-pink/prebuilt-themes.css";

5. Use Angular Material’s theming capabilities to customize the look and feel of the UI components. For example, you can change the color scheme of a button:

&lt;button mat-raised-button color="primary"&gt;My Button&lt;/button&gt;

1	<button mat-raised-button color="primary">My Button</button>

6. Build the theme using the Liferay theme tasks and deploy it to your Liferay instance:

gulp build
gulp deploy

1 2	gulp build gulp deploy

Note that this is just a basic example and there are many other customization options available for both Liferay and Angular Material. Also, make sure to check the official documentation and best practices for each technology to ensure proper usage.

February 19, 2017 Harmeet Singh

How to create a theme in Liferay 7 DXP

Here is the list of software that required to create liferay 7 DXP theme

NodeJS – for yomen,gulp and generator-liferay-theme
Ruby Installed – Ruby is to create SaSS and Compass CSS elements
Yo – Node JS plugin
Gulp – Node JS Plugin

Installing Node and NPM

First we need to download and install the node if you have already installed and configured Node, feel free to skip this section. We can download Node.js from http://nodejs.org and follow the instructions mentioned here:

Download the installer for your operating system from http://nodejs.org/. Nodejs provides different installer as per your platform. It also include the npm package manager

If the installation asks for the system restart, then restart your computer.
Once the system is restarted, we can check whether Node.js was set up properly or not.
Open the command prompt and run the following command to make sure you are installing latest version:
- node –version // to verify the version

Configure the NPM Path and environment

After NodeJS installation we need to configure the NPM path. we will create .npmrc config file and set manually npm-packages path to keep these plugins at one directory.

Create .npmrc file at user Home directory C:/User/{user-name} with below parameters:

prefix=C:/Users/harmeet.singh/.npm-packages
NPM_PACKAGES=C:/Users/harmeet.singh/.npm-packages
NODE_PATH=%NODE_PATH%:%NPM_PACKAGES%/lib/node_modules

Now we need to install yomen and gulp plugin by giving below command:

npm install -g yo
npm install -g gulp

Ruby Installation

Now we need to install ruby sass and compass.

Download and Install Ruby from here http://rubyinstaller.org/downloads/
Add the ruby bin path to windows environment variable PATH , so we can access the gem globally

Then run the below command with gem keyword such as (gem sources -r https://rubygems.org):

sources -r https://rubygems.org
sources -a http://rubygems.org
install sass compass

Steps for creating a theme in Liferay 7 DXP

Create one folder in your local drive where you want to create your theme.
Now open the cmd in same folder
Next run this command —yo liferay-theme

Enter your Theme name “My First Liferay 7 Theme (no need to give “-” between spaces) press enter
Next —-enter (it will ask you..would you like to use as ID)
Then select liferay theme version 7.0 or 6.2
Next — enter the path of app server directory
then enter the URL of your site – http://localhost:8080

Now we need to update the theme package.json to use Ruby SaSS and Compass by default it use Node SaSS:

Edit package.json in you theme directory folder and set rubySass to true
templateLanguage to vm (by default it set to “ftl”)

We have change vm in liferay-look-and-feel.xml file because you will get below error: SERVLET_CONTEXT_/templates/portal_normal.ftl does not exist

Run gulp build to build the theme

Note: if you get the below error while build your theme:

Starting ‘build:compile-ruby-sass’…
error build/_css/aui/lexicon/lexicon-base/mixins/_nameplates.scss (Line 14: Invalid CSS after “(max-width: “: expected expression (e.g. 1px, bold), was “$screen-xs-max)”)

To solve this error do this:

edit the file “\theme-folder\node_modules\liferay-frontend-theme-unstyled\css\aui\lexicon\lexicon-base\_nameplates.scss” and comment below code:

//.nameplate-label-autofit-xs-max {
// @include nameplate-label-autofit('max-width: $screen-xs-max');
//}

//.nameplate-label-autofit-xs-max {

// @include nameplate-label-autofit('max-width: $screen-xs-max');

//}

Run gulp build deploy again to deploy your theme and start your development

Note: Make sure your are connected with internet while creating theme.

June 29, 2016 Harmeet Singh

Bootstrap dropdown hidden issue in table

In this post we’ll see that, how we can solve the bootstrap dropdown issue when we use the dropdown inside the table or any element with overflow:hidden property. so when you add a bootstrap dropdown button inside a table row and apply the overflow hidden on table container it will hide your dropdown in open state.

For example:

This is sample HTML of your issue:

<div class="lorem-table-wrapper">
				<div class="table-body">
					<table class="table table-striped">
						<thead>
						<tr>
							<th></th>
							<th class="sortable">Column 1</th>
							<th class="sortable">Column 2</th>
							<th class="sortable">Column 3</th>
							<th>Column 4</th>
							<th>Dropdown</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td class="new-column"><i class="icon-star-o new-machine" title="New Machine"></i></td><td>Lorem lipsum</td><td>012345</td><td>10/14/12</td><td>10/14/16</td><td>
							<div class="btn-group">
								<button class="btn dropdown-toggle btn-view" data-toggle="dropdown">
									<span class="visible-desktop toggle-text">Select</span>
									<i class="icon-sort"></i>
								</button>
								<ul class="dropdown-menu pull-right">
									<li><a href="#">Lorem lipsum service</a></li>
									<li><a href="#">Lorem lipsum Content</a></li>
									<li><a href="#">Lorem lipsum</a></li>
									<li><a href="#">Custom</a></li>
									<li><a href="#">Open Requests</a></li>
								</ul>
							</div>
							</td>
						</tr>
						<tr>
							<td class="new-column"></td><td>Lorem Lipsum</td><td>012345</td><td>10/14/12</td><td>10/14/16</td><td>
							<div class="btn-group">
								<button class="btn dropdown-toggle btn-view" data-toggle="dropdown">
									<span class="visible-desktop toggle-text">Select</span>
									<i class="icon-sort"></i>
								</button>
								<ul class="dropdown-menu pull-right">
									<li><a href="#">Lorem lipsum service</a></li>
									<li><a href="#">Lorem lipsum Content</a></li>
									<li><a href="#">Lorem lipsum</a></li>
									<li><a href="#">Custom</a></li>
									<li><a href="#">Open Requests</a></li>
								</ul>
							</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

<thead>

<tr>

<th class="sortable">Column 1</th>

<th class="sortable">Column 2</th>

<th class="sortable">Column 3</th>

<th>Column 4</th>

<th>Dropdown</th>

</tr>

</thead>

<tbody>

<tr>

<td class="new-column"><i class="icon-star-o new-machine" title="New Machine"></i></td><td>Lorem lipsum</td><td>012345</td><td>10/14/12</td><td>10/14/16</td><td>

<span class="visible-desktop toggle-text">Select</span>

</button>

<li><a href="#">Lorem lipsum service</a></li>

<li><a href="#">Lorem lipsum Content</a></li>

<li><a href="#">Lorem lipsum</a></li>

<li><a href="#">Custom</a></li>

<li><a href="#">Open Requests</a></li>

</ul>

</div>

</td>

</tr>

<tr>

<td class="new-column"></td><td>Lorem Lipsum</td><td>012345</td><td>10/14/12</td><td>10/14/16</td><td>

<span class="visible-desktop toggle-text">Select</span>

</button>

<li><a href="#">Lorem lipsum service</a></li>

<li><a href="#">Lorem lipsum Content</a></li>

<li><a href="#">Lorem lipsum</a></li>

<li><a href="#">Custom</a></li>

<li><a href="#">Open Requests</a></li>

</ul>

</div>

</td>

</tr>

</tbody>

</table>

</div>

and this your css for table wrapper

.lorem-table-wrapper .table-body {
    overflow: visible;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}

.lorem-table-wrapper .table-body {

overflow: visible;

overflow-x: auto;

overflow-y: hidden;

-webkit-transition: height 500ms ease-in-out;

transition: height 500ms ease-in-out;

}

This is your output of your HTML and CSS. you can see dropdown is hidden inside table.

To solve this problem we need to two things:

First capture the event of bootstrap dropdown button when dropdown show and hide
- show.bs.dropdown
- hide.bs.dropdown
Second inside this event we will check the current target offset(.offset()) and outer height of the current target(.outerHeight());

Here is the full code:

var dropdownMenu;
                                  
$('.table-body').on('show.bs.dropdown', function (e) {
    dropdownMenu = $(e.target).find('.dropdown-menu');
    $('body').append(dropdownMenu.detach());
    var eOffset = $(e.target).offset();
    dropdownMenu.css({
        'display': 'block',
        'top': eOffset.top + $(e.target).outerHeight(),
        'left': eOffset.left,
		'width':'184px',
		'font-size':'14px'
    });
	dropdownMenu.addClass("mobPosDropdown");
 });
    
$('.table-body').on('hide.bs.dropdown', function (e) {
    $(e.target).append(dropdownMenu.detach());
    dropdownMenu.hide();
 });

var dropdownMenu;

$('.table-body').on('show.bs.dropdown', function (e) {

dropdownMenu = $(e.target).find('.dropdown-menu');

$('body').append(dropdownMenu.detach());

var eOffset = $(e.target).offset();

dropdownMenu.css({

'display': 'block',

'top': eOffset.top + $(e.target).outerHeight(),

'left': eOffset.left,

'width':'184px',

'font-size':'14px'

});

dropdownMenu.addClass("mobPosDropdown");

});

$('.table-body').on('hide.bs.dropdown', function (e) {

$(e.target).append(dropdownMenu.detach());

dropdownMenu.hide();

});

Now run your HTML in browser and see your issue is solved

Thanks for reading. Happy Learning!!!

June 28, 2016 Harmeet Singh

Windows devices touch issues

In this article i will show you how we can solve the touch issue in windows devices. Now a days we have lot’s of devices are available in the market. So when we are creating a responsive site we have to first fix the device requirement specification from client because we must sure it work properly, user friendly in every device mobile,tablet and desktop and every platform like android,iOS and windows .

Every devices have different specification about touch and it behaves differently. In windows we mostly use IE who handle the touch events differently but in webkit it supports a touch interface that is separate from mouse handling and IE groups the touch,mouse and stylus into a single interface(pointer) it also has been submitted in W3C specification pointer events.

In windows devices IE pointer events model have custom gesture to indicate the area of the page by default gesture handling(pan). we can turn off default gesture handling by using this property -ms-touch-action for example.

<div id="scrollbar" style="overflow: hidden; -ms-touch-action: none;">

1	<div id="scrollbar" style="overflow: hidden; -ms-touch-action: none;">

However, IE10 on Windows Phone 8 also supports the pan-x and pan-y value of -ms-touch-action property which specify that the browser should handle horizontal or vertical gestures to solve the touch issues in windows, and custom JavaScript handlers should handle everything else.

Note Microsoft vendor prefixed version of this event (-ms-touch-action) is no longer supported in IE11 and may be removed in a future release. Instead, use the non-prefixed name touch-action, which is better for standards compliance and future compatibility.

Syntax

html
{
    -ms-content-zooming: none; /* Disables zooming */
    touch-action: cross-slide-y pan-y;   /* Disable any special actions on tap/touch */
}

div.list > div.scrollbar{
  touch-action: pan-x;
}

html

{

-ms-content-zooming: none; /* Disables zooming */

touch-action: cross-slide-y pan-y; /* Disable any special actions on tap/touch */

}

div.list > div.scrollbar{

touch-action: pan-x;

}

When a we touches an element, that element’s touch-action property determines the default touch behaviors permitted for that contact, like panning or zooming.

Property values

One of the following values, a combination of the gesture values.

auto: Initial value. Indicates the Windows Store app using JavaScript will determine the permitted touch behaviors for the element.
none: The element permits no default touch behaviors.
pan-x: The element permits touch-driven panning on the horizontal axis. The touch pan is performed on the nearest ancestor with horizontally scrollable content.
pan-y: The element permits touch-driven panning on the vertical axis. The touch pan is performed on the nearest ancestor with vertically scrollable content.
pinch-zoom: The element permits pinch-zooming. The pinch-zoom is performed on the nearest ancestor with zoomable content.
manipulation: The element permits touch-driven panning and pinch-zooming. This is the shorthand equivalent of “pan-x pan-y pinch-zoom”.
double-tap-zoom: The element permits double-tap-zooming. The double-tap-zoom is performed on the full page. Double-tap-zoom is not available in Windows Store apps using JavaScript.
cross-slide-x: The element permits cross-sliding along the horizontal axis.
cross-slide-y: The element permits cross-sliding along the vertical axis.

For more information about web development for windows click here

November 28, 2015 Harmeet Singh

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.
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
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>

$processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")

</div>

$processor.processColumn("column-2", "portlet-column-content portlet-column-content-last")

</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; }

.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; }

LIFERAY UI

LIFERAY UI

Category: Liferay Theme

Step by step guide to create a theme in liferay with Angular Material UI

What is Angular Material UI and how it can help building a better UI (User Interface) ?

Here’s an example of creating Liferay theme with Angular Material UI

How to create a theme in Liferay 7 DXP

Installing Node and NPM

Configure the NPM Path and environment

Ruby Installation

Steps for creating a theme in Liferay 7 DXP

Windows devices touch issues

Syntax

Property values

Bootstrap 3 with Liferay 6.2

Bootstrap 3

Bootstrap 2.3.2

Creating Theme with Bootstrap 3 in Liferay 6.2

Liferay 6.2 Basic Structure: [Two Column Layout]

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