Utilize of standard portlet cascading style-sheet classes

The Portlet Specification and WSRP Specification define set of CSS classes that portlet developer should use while developing the compliant portlet. Basic idea is that portlet developer will use these classes and then theme developer will provide implementation of these classes so that all the portlets on the page look same and provide same look and feel as the theme.

For example a Portlet author wants a certain font type to be larger or smaller, they should indicate this using a relative size.


Example1: <div class="portlet-font" style="font-size:larger">Important information</div>

Example2: <div class="portlet-font-dim" style="font-size:80%">Small and dim</div>


In this case the developer is using portlet-font and portlet-font-dim css classes, when this portlet is deployed in IBM WPS and we apply IBM theme, it will provide implementation of the class

Default IBM themes provide implementations of classes defined in portlet specification. you can find them in WebSphere/wp_profile/installedApps/DefaultNode/wps.ear/wps.war/themes/html/Portal/styles_portlet.jspf, This is the implementation of above two classes


<%-- Text in body of standard portlet and portlet in edit mode --%>
.portlet-font {
    font-family: ${requestScope.cssRules.portalSansSerif};
    font-size: ${requestScope.cssRules.fontSize.portalNormal};
    color: #333333;
}

<%-- Text for form element descriptions --%>
.portlet-font-dim {
    color: #808080;
}

1 comment: