Theme Support

[lucas theisen, modifié il y a 12 années.]

I have been attempting to integrate Liferay Themes into my portlet that uses alloyfaces. My problem is that I want to re-use images from the current theme as background images in my portlet. More specifically, I would like to use the 05_right.png and 05_down.png while creating a twisty (or panelCollapsible in ICEfaces parlance). Basically I have this:

<style>
.action-not-link {
	color: black;
	text-decoration: none;
}

.twisty-closed {
	background-image: url([i]link to theme image 05_right.png[/i]);
}

.twisty-open {
	background-image: url([i]link to theme image 05_right.png[/i]);
}

.twisty-closed,
.twisty-open {
	font-size: 13px;
	font-weight: bold;
	padding-left: 20px;
}
</style>
...
<h:panelgroup layout="block">
  <h:commandlink actionlistener="#{twisty.toggleExpanded}" immediate="true" styleclass="action-not-link">
    <h:outputtext value="#{twisty.name}" styleClass="#{twisty.expanded ? &quot;twisty-open&quot; : &quot;twisty-closed&quot;}" />
  </h:commandlink>
</h:panelgroup>
<h:panelgroup layout="block" rendered="#{twisty.expanded}">
  [i]Some twistied content goes here[/i]
</h:panelgroup>

Is there/could there be a servlet (or some other mechanism I am unaware of) that could proxy requests for something like url(liferay-theme/images/05_right.png) to the appropriate image in the current theme?

[Neil Griffin, modifié il y a 11 années.]

@Lucas: I'm reviewing some old forum posts and I'm sorry that I missed getting back to you on this.

If you include liferay-faces-portal (formerly known as liferayfaces) then you should be able to use an EL-expression in a CSS resource like this:

.my-icon {
    background-image: #{liferay.themeImagesURL}/common/add.png;
}

Please let me know if that works for you. Thanks.