How to change portlet-title icon for a different one.

Using plugin hooks we need to customize the existing liferay taglib  jsp file .

file path given below

%LIFERAY_HOME%/webapps/ROOT/html/taglib/ui/icon/page.jsp find this piece of code:

Original code:

<liferay-util:buffer var="linkContent">
	<img class="<%= imgClass %>" src="<%= src %>" <%= details %> />

and replace it with this one:

<liferay-util:buffer var="linkContent">
<img class="imgClass" src="<%= src %>" <%= details %> /><div style="float:left" class="customImgClass"></div>
urlIsNotNull %>">

Next, in “Look and Feel” >> “Advanced Styling” >> “Add a CSS rule for just this portlet” and put below code in brackets.

#portletID .portlet-title .customImgClass{
background-image: url('/theme-name/images/custom/customicon.png');
width: 16px; 
height: 16px;
margin-right: 5px;
#portletID .portlet-title .imgClass{
display: none;


Comments on: "Change Liferay portlet-title icon" (2)

  1. […] I found this little link that (although it's a little old, the concept should still apply) can theme-enable all of your icons.Enjoy! Flag Please sign in to flag this as […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: