« Torna a Customization

Portlet Skins

This article needs updating. For more information, see Wiki - Need Updating.

Introduction #

This article is about configuring the look of specific portlets.

Liferay 6 #

If you configure an individual portlet and click "Advanced Styling" in the configuration menu, you can also edit the CSS of the individual portlet and use the live editing feature to watch your changes affect the portlet on the live page.

Liferay 5 #

This section needs updating (outdated). Comment via author comment:"Discovered better way to change skin. Add JSP hook to style portlet with skin selector tab. This way does not require struts and tiles config changes."

Liferay does not support skins for portlets and this is foreign to those familiar with WebSphere and some other portals. There is however a simple way to add skinability to portlets: by wrapping your portlet with a custom css class.

Set up the Skin #

1. Modify

portlet.vm
in your theme, add code

#set ($portlet_preferences = $portlet_display.portletSetup)
#if  ($portlet_preferences)
#set ($skin = $portlet_preferences.getValue("portlet-skin", ""))
#end

2. Modify portlet div to add skin class

<div class="portlet $skin" id="portlet-wrapper-$portlet_id">

3. Create required JSP in web module. This document assumes using EXT but fix the paths if you don't.

4. Create

ext-web/docroot/html/portlet/ext/common/init.jsp

<%@ include file="/html/portlet/init.jsp" %>
<liferay-portlet:renderURL varImpl="portletURL" />
<%
    PortletPreferences preferences = renderRequest.getPreferences();
    String portletResource = ParamUtil.getString(request, "portletResource");
    if (Validator.isNotNull(portletResource)) {
        preferences = PortletPreferencesFactoryUtil.getPortletSetup(request, portletResource);
    }

    String skin = ParamUtil.get(renderRequest, "skin",preferences.getValue("portlet-skin", StringPool.BLANK));
%>

5. Create

ext-web/docroot/html/portlet/ext/common/edit-skin.jsp

<%@ include file="/html/portlet/ext/common/init.jsp" %>
<liferay-portlet:renderURL varImpl="portletURL" />
<%
    String cmd = ParamUtil.get(renderRequest, "cmd", StringPool.BLANK);
    if (Constants.UPDATE.equals(cmd)) {
        preferences.setValue("portlet-skin", skin);
        preferences.store();
%>
<div class="portlet-msg-info"><liferay-ui:message key="you-have-successfully-updated-the-setup"/></div>
<%
    }
%>
<form action="<liferay-portlet:actionURL />" id="<portlet:namespace />fm" method="post" name="<portlet:namespace />fm">
    <input name="<portlet:namespace /><%= Constants.CMD %>" type="hidden" value="<%= Constants.UPDATE %>" />
    <p>
    <liferay-ui:message key="portlet-skin"/>:
    <select name="<portlet:namespace />skin">
        <option <%= Validator.isNull(skin) ? "selected" : ""%> value=""><liferay-ui:message key="default"/></option>
        <option <%= "osv-skin-blue".equals(skin) ? "selected" : ""%> value="osv-skin-blue">osv-skin-blue</option>
    </select>
    </p>
    <p>
    <input type="button" value="<liferay-ui:message key="save" />" onClick="submitForm(document.<portlet:namespace />fm);" />
    </p>
</form>

6. Edit

tiles-defs.xml
in ext, add code

    <!-- Common -->

    <definition name="portlet.ext.common.edit-skin" extends="portlet">
        <put name="portlet_content" value="/portlet/ext/common/edit-skin.jsp" />
    </definition>

Configure the Portlet #

Now we determine which portlets should be skinable, and for each portlet we add an edit-mode struts action. Please be aware of the

<struts-path>
defined in
liferay-portlet.xml
, and respect the action path. For example, lets modify Journal Content portlet.

1. Copy portlet definition from

portlet-custom.xml
to
portlet-ext.xml
and add edit mode action

	<portlet>
		<portlet-name>56</portlet-name>
		<display-name>Journal Content</display-name>
		<portlet-class>com.liferay.portlet.StrutsPortlet</portlet-class>
		<init-param>
			<name>view-action</name>
			<value>/journal_content/view</value>
		</init-param>
<init-param>
    <name>edit-action</name>
    <value>/journal_content/edit-skin</value>
</init-param>
		<expiration-cache>0</expiration-cache>
		<supports>
			<mime-type>text/html</mime-type>
			<mime-type>application/vnd.wap.xhtml+xml</mime-type>
<portlet-mode>edit</portlet-mode>
		</supports>
		<resource-bundle>com.liferay.portlet.StrutsResourceBundle</resource-bundle>
		<security-role-ref>
			<role-name>guest</role-name>
		</security-role-ref>
		<security-role-ref>
			<role-name>power-user</role-name>
		</security-role-ref>
		<security-role-ref>
			<role-name>user</role-name>
		</security-role-ref>
	</portlet>

2. Add struts action in ext module, modify

struts-config.xml

        <!-- Edit Skin -->

        <action path="/journal_content/edit-skin" forward="portlet.ext.common.edit-skin"/>

3. Redeploy ext and use edit preferences portlet action to change the skin for a portlet.

4. Add a custom style to the theme or page

.osv-skin-blue {
    border: solid;
}
0 Allegati
48539 Visualizzazioni
Media (0 Voti)
La media del punteggio è 0.0 stelle su 5.
Commenti
Commenti Autore Data
Discovered better way to chage skin. Add JSP... Maksym Mikheienko 7 febbraio 2009 5.17
This way how do you store skin settings for... Rix Beck 6 maggio 2010 4.00
@all: Is there a way to do enable skinning for... m m 12 maggio 2010 5.16
Each portlet has css class "portlet-boundary".... Rix Beck 14 maggio 2010 6.50

Discovered better way to chage skin. Add JSP hook to style portlet with skin selector tab. This way does not require struts and tiles config chages.
Inviato il 07/02/09 5.17.
This way how do you store skin settings for portlet?
Inviato il 06/05/10 4.00 in risposta a Maksym Mikheienko.
@all:
Is there a way to do enable skinning for _all_ portlets?
(instead of specifying each portlet with ID etc like in the examples above)

@Maksym: I'd appreciate if you could share some snippets to understand what you did..

--mikey
Inviato il 12/05/10 5.16.
Each portlet has css class "portlet-boundary". Simplest way to do in theme assign them skins under this class. Also can make variations what are just change portlets' skin.
Inviato il 14/05/10 6.50 in risposta a m m.