Styling Search Bar in Liferay Theme

Liferay itself provides Out-Of-The-Box (OOTB) themes enabling organizations to build quick time-to-market customer engaging sites. There are times where organizations would like to build their own theme to fit their corporate branding. When building such theme, there is usually a need to style the search bar.

Details in creating a Liferay Theme can be found here

Thanks to the contribution by Marcos Castro on the Manizanita Theme (a Liferay Theme ), the theme provides me an idea on how to style the search bar (i.e. the Search Portlet) provided by Liferay. Below provides the changes required to be done for the mentioned files in the custom Liferay Theme (using Velocity for the templates).

 

_diffs/js/main.js:

AUI().ready(

'liferay-sign-in-modal', 'event-outside', 'transition',

function(A) {

....

var searchIcon = A.one('.open-search');

var rightIconGroup = A.one('.right-icon-group');

if (searchIcon) {

searchIcon.on(

'click',

function() {

if (!BODY.hasClass('opened-search')) {

var closingSearch = rightIconGroup.once(

'clickoutside',

function() {

BODY.removeClass('opened-search');

}

);

}

else {

closingSearch.detach();

}

BODY.toggleClass('opened-search');

var openSearchInput = A.one('.portlet-search input[type="text"]');

openSearchInput.focus();

}

);

}

.. 

);

 

 

_diffs/cs/custom.css:

.portlet-search {

display: inline-block;

margin-right: -2px;

form {

margin: 0;

padding: 0;

input {

margin-bottom: 3px;

padding: 0;

width: 1px;

@include border-radius(5px);

@include opacity(0);

}

select, input[type="image"] {

display: none;

}

}

}

 

.opened-search #banner{

.portlet-search {

form {

input {

padding: 4px;

width: 150px;

@include opacity(1);

}

select{

padding: 4px;

width: 100px;

background: transparent;

border: 1px solid #ccc;

display: inline;

@include opacity(1);

@include border-radius(5px);

}

}

}

 

.open-search {

color: #555;

width: 13px;

 

.icon-search:before {

content: "\f054";

}

}

}

_diffs/templates/portal_normal.vm (or any velocity file you want to insert search in it):

<span class="right-icon-group">

<span class="portlet-search">

$theme.search()

</span>

<a class="open-search" href="#">

<i class="icon-search"></i>

</a>

</span>

End Result:

Before Clicking Search Icon

After Clicking Search Icon

Note: This may not be the only approach. Depending on the design and deliverables (ie. html, css, javascript, images etc.) from the Creative Design or Web Design Team, the files to change and approach may differ from the above.