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 附件
48542 查看
平均 (0 票)
满分为 5,平均得分为 0.0。
评论
讨论主题回复 作者 日期
Discovered better way to chage skin. Add JSP... Maksym Mikheienko 2009年2月7日 上午5:17
This way how do you store skin settings for... Rix Beck 2010年5月6日 上午4:00
@all: Is there a way to do enable skinning for... m m 2010年5月12日 上午5:16
Each portlet has css class "portlet-boundary".... Rix Beck 2010年5月14日 上午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.
在 09-2-7 上午5:17 发帖。
This way how do you store skin settings for portlet?
在 10-5-6 上午4:00 发帖以回复 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
在 10-5-12 上午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.
在 10-5-14 上午6:50 发帖以回复 m m