Blogs

I am working right now in creating a new portlet por publishing documents (DocBook, XML Framemaker, Javadoc) so you can view them inside a Liferay portlet add comments the document section, access the document trough a tree index and other features. In order to implement it we have decided to start from the Document Library (DL) portlet and add new operations over the folder and files (publish and browse).

In order to have a first prototype as soon as possible we have started from the DL portlet as it is originally and create a plugin using it. Everything was more or less easy to achive but the CSS for the new Document Publisher plugin, that it is reusing the DL one, did not work. Strange.

Until some researching with the cool CSS editor of the Web developer Firefox plugin I see that each portlet could have its own CSS namespace so you can change the look and feel of a portlet very easily. How to do it? Just add the CSS namespace to liferay-portlet.xml plugin file and then define the CSS style for this namespace. For reusing the CSS from DL y the DP plugin I have needed to add to this plugin file:

<liferay-portlet-app>
    <portlet>
        <portlet-name>documentpublisher</portlet-name>
        <struts-path>document_publisher</struts-path>
        <restore-current-view>false</restore-current-view>
        <instanceable>true</instanceable>
        <css-class-wrapper>portlet-document-library</css-class-wrapper>



This is a wonderfull way to personalize easily your portlet look and feel. Looking to portlet standard 1.0 (JSR 168) and 2.0 (JSR 286) at does not seem that it is part of the standard (in the Apendix C about CSS it is only defined some CSS tags to be used) so it is something specific of LIferay I suppose. A veyr nice CSS architect work.

In order to define the CSS specific for this namespace for example for the class header you should do something like:

.portlet-document-library .header {
    background-color: #E6E6E6;
    font-weight: bold;
    line-height: 20px;
    height: 20px;
}