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

#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

    <!-- 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>

liferay-portlet.xml

1. Copy portlet definition from

portlet-custom.xml

portlet-ext.xml

	<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;
}