how to change portlet icons

[Petteri Hyvärinen, modificado hace 16 años.]

Hi,

I'd like to use portlet icons of my own, but I don't have a clue how to tell liferay to do so.
In the portlet.vm -template, icons are loaded using a velocity variables like $theme.iconPortletCss() $theme.iconConfiguration() etc. Should I just set these to point to my icons? The actual html resulting from the template is the icon as a link to either some javascript (like in close and minimize) or a html link (like in maximize), so i'd suspect a bit more has to be done...

I'd also like to see some document describing the javascript behavior - like drag 'n' dropping portlets - in the portal. I can only assume there's some function which seeks for specific class names or tag id's and then makes them "draggable" with jquery, but there's no liferay-specific reference available (or at least I haven't found any).

Thanking in advace,
-Petteri

[Björn Ryding, modificado hace 16 años.]

Do you want to use CSS sprites or do something else that requires you to change things a bit? If not, you can just put your own icons in the appropriate folder of your own theme (your-own-theme/images/portlet/). Take a look at one of the current themes to get the names of the images/icons (close.png, edit.png, maximize.png, minimize.png etc).

[Petteri Hyvärinen, modificado hace 16 años.]

Thanks for the reply!
The main motivation for this is to be able to use an existing layout. Since I already have all the css classes and pics ready, I was kinda hoping to do as little changes as possible. This is also why I was asking about the jquery and how drag 'n' drop works in liferay. Because I have my own css classes for layout I'd like to use them, but especially with portlets this tactic fails because the javascript is tied to certain classnames. Combining css classes doesn't work either.

I downloaded the source, took a look at it and found out that you'd really have to dig quite deep to get your hands on the icons' paths. So i guess I'll do what you suggested, since there are not that many icons to change. If there's an article about more advanced theme development like sprites, i'd love to read it, though.

-Petteri

[Josh Asbury, modificado hace 15 años.]

Bjorn -

I am trying to change the icon for journal contents for a specific theme. I added a directory under images/portlet/journal_content on with an image called icon.png, but it isn't being picked up by the theme. Do you know how I can do this on a theme-basis for particular portlets without impacting the entire portal?

Thanks,
Josh

[Björn Ryding, modificado hace 15 años.]

Hi Josh,

You can put an if statement in your theme's portlet.vm and check if the $portlet_id matches the portlet id of journal_content portlet and if so replace $theme.iconPortlet() with an image tag pointing at your own custom icon.

Cheers,
Björn

[Josh Asbury, modificado hace 15 años.]

Thanks Björn,

You rock.

[Robert Carter, modificado hace 15 años.]

Björn Ryding:

Hi Josh,

You can put an if statement in your theme's portlet.vm and check if the $portlet_id matches the portlet id of journal_content portlet and if so replace $theme.iconPortlet() with an image tag pointing at your own custom icon.

Cheers,
Björn

I am experimenting with this as well. Can you do that same kind of thing in the Advanced CSS styling of each portlet?

[Luke Killer, modificado hace 14 años.]

Robert Carter:

I am experimenting with this as well. Can you do that same kind of thing in the Advanced CSS styling of each portlet?

Today I've found a workaround, how to change portlet-title icon for a different one.

In the specific file: /html/taglib/ui/icon/page.jsp find this piece of code:

<span <%="cssClassHtml" %> &lt;%= idHtml %&gt;&gt;<c:if test="<%= urlIsNotNull %>">
<a href="<%= url %>" <%="onClickHtml" %> &lt;%= targetHtml %&gt;&gt;</a></c:if><a href="<%= url %>" <%="onClickHtml" %>
<img class="icon" src="<%= src %>" <%="details" %> /&gt;
<c:if test="<%= urlIsNotNull %>"></c:if></a></span>

and replace it with this one:

<span <%="cssClassHtml" %> &lt;%= idHtml %&gt;&gt;<c:if test="<%= urlIsNotNull %>">
<a href="<%= url %>" <%="onClickHtml" %> &lt;%= targetHtml %&gt;&gt;</a></c:if><a href="<%= url %>" <%="onClickHtml" %>
<img src="<%= src %>" <%="details" %> class="icon" /&gt;<div style="float:left" class="myicon"></div>
<c:if test="<%= urlIsNotNull %>"></c:if></a></span>

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

#portletID .portlet-title .myicon {
background-image: url(....path to your icon...);
width: ..px; height: ..px; margin-right: 5px;
}
#portletID .portlet-title .icon {
display: none;
}

Good luck.

[Krati Gupta, modificado hace 13 años.]

Hi ,

By following above steps icon is not coming and when we remove display:none from .icon so two icon is coming default and customized.
So how to remove default one so that only customized will appear .

[Anil Sunkari, modificado hace 13 años.]

Hi Krati,

As you can also override the below props in portal-ext.properties & make sure the images(max/min/close) also overridden.As i followed the same.

# Set this property to true to load the theme's merged CSS files for faster
# loading for production.
#
# Set this property to false for easier debugging for development. You can
# also disable fast loading by setting the URL parameter "css_fast_load" to
# "0".
#
theme.css.fast.load=false

#
# Set this property to true to load the theme's merged image files for
# faster loading for production.
#
# Set this property to false for easier debugging for development. You can
# also disable fast loading by setting the URL parameter "images_fast_load"
# to "0".
#
theme.images.fast.load=false

#
# The strip filter will attempt to cache inline minified CSS and JavaScript
# content. Set this property configure the maximum pieces of cached content.
# Set this property to 0 to disable caching of inline minified content.
#
minifier.inline.content.cache.size=0
#
# Set the Velocity resource managers. We extend the Velocity's default
# resource managers for better scalability.
#
# Note that the modification check interval is not respected because the
# resource loader implementation does not know the last modified date of a
# resource. This means you will need to turn off caching if you want to be
# able to modify VM templates in themes and see the changes right away.
#
velocity.engine.resource.manager.cache.enabled=false

#
# The cache filter will cache content. See ehcache.xml to modify the cache
# expiration time to live.
#
com.liferay.portal.servlet.filters.cache.CacheFilter=false

Hope this helps you........

Regards
Anil Sunkari

[Krati Gupta, modificado hace 13 años.]

Hi Anil ,

By Following the steps mentioned by you , still no result .

[Anil Sunkari, modificado hace 13 años.]

have you changed the icons even in .sprite.png too????

[Anne D C, modificado hace 14 años.]

Hi Björn,

Is there a way to change internal icons without having to replace the original image? I mean, I have my own theme and now I'm doing two color-schemes. What I want is to put some custom images, as the reply.png or the rating stars icons, different from the original ones (replaced for my basic theme), so when you'll choose one version or another, they will change too.
You know what I mean? Sorry if I wasn't clear...

If possible, can somebody answer a bit more faster than usual? Thx!