(888) 685-3101 ext. 2

Portlets are the basic building blocks of any site running Liferay. The default portlet styles are fine; but to really make your site sing, you can get a handle on them and dress them up to look as good as the rest of that theme you so lovingly handcrafted. Let’s start with the basics.

General Portlet Look and Feel

Here’s the basic HTML structure of a Liferay portlet. I’ve also included diagrams so you can get a feel of how all these pieces fit together.

<div id="[portlet UUID]" class="portlet-boundary">
    <div class="portlet-body">
        <section id="[portlet UUID]" class="portlet">
            <header class="portlet-topper">
                <h1 class="portlet-title">
                    <span>
                        <img class="icon">
                    </span>
                    <span class="portlet-title-text"> </span>
                </h1>
            </header>
            <div class="portlet-content">
                <div class="portlet-content-container">
                    <div class="portlet-body">
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
 

Basic-Portlet-1

Basic-Portlet-2

Basic-Portlet-3

Basic-Portlet-4

Basic-Portlet-5

Basic-Portlet-6
You may have noticed that .portlet-body is applied both to the content of the portlet and the entire body of the portlet. If you want to target it, be sure to qualify it as .portlet-boundary > .portlet-body or .portlet-content-container > .portlet-boundary. (From my experience, though, you’ll get the same results just as easily in the latter case by just targeting .portlet-content-container.)

Advanced Techniques

When ‘Edit Controls’ is checked, Liferay adds the class controls-visible to the body tag. (Ordinarily, the body gets the class controls-hidden.) Sometimes in the course of making your portlets more awesome, you can throw things off; especially when you start styling the portlet-topper. Here’s where to fix that:

Portlet Contents

There are common portlet content styles defined in JSR 286. In plain English, this means that that these styles will work in any portlet anywhere, regardless of which flavour of portal you choose (Liferay, WebSphere, etc.) These styles are mainly for the benefit of the portal developers, but they can be handy hooks for front-end people as well.

Most of these are pretty much what they say on the tin, but I’ve made annotations where there may be some confusion.

Main Text

  • .portlet-font
  • .portlet-font-dim

Messages

  • .portlet-msg-status
    Status of the current operation
  • .portlet-msg-info, .portlet-msg-info.pending
    Help messages, general additional information, etc.
  • .portlet-msg-error
    Error messages
  • .portlet-msg-alert
    Warning messages
  • .portlet-msg-success
    Success messages
  • .portlet-msg-info-label, .portlet-msg-error-label, .portlet-msg-alert-label, .portlet-msg-success-label
    Message labels

Tables and Sections

The official JSR 286 definitions I’ve included below provide separate classes for sections and tables (.portlet-section-header and .portlet-table-header, etc.) but the default Liferay portlet.css only includes section classes. This is probably because it’s default CSS carried over from earlier versions of Liferay which used the older JSR 168 standard. Make sure you talk to your portlet developers to make sure you’re on the same page!

  • .portlet-section-header, .portlet-section-subheader
    Table or section header and subheader
  • .portlet-section-body
    Normal table cell text
  • .portlet-section-alternate
    Text in every other row in the table
  • .portlet-section-body-hover, .portlet-section-alternate-hover
    Hover styles — no CSS3 necessary!
  • .portlet-section-selected
    Text in a selected cell range
  • .portlet-section-footer
    Table or section footnote
  • .portlet-section-text
    Text otherwise associated with the table but doesn’t fall into one of the other categories, such as explanatory or help text

Forms

  • .portlet-form-label
    Descriptive label of the whole form
  • .portlet-form-field-label
    Text that appears beside a user input text field (e.g. textarea)
  • .portlet-form-input-field
    User input text field (e.g. textarea)
  • .portlet-form-field
    Label for a non-text-input field, like checkboxes or radio buttons
  • .portlet-form-button
    Button text (e.g. ‘Submit’)
  • .portlet-icon-label
    Text that appears beside a context-dependent action icon
  • .portlet-dlg-icon-label
    Text that appears beside a ‘standard’ icon (e.g. OK or Cancel)

Menus

  • .portlet-menu-caption
    Caption describing the menu
  • .portlet-menu
    General menu settings such as background color, margins, etc.
  • .portlet-menu-item, .portlet-menu-item-hover
    Normal, unselected menu item
  • .portlet-menu-item-selected, .portlet-menu-item-hover-selected
    Selected menu item
  • .portlet-menu-cascade-item, .portlet-menu-cascade-item-selected
    Sub-menu items
  • .portlet-menu-description
    Descriptive text for the menu (like an explanation below the menu)

This is not meant to be an exhaustive list…. a full list of default Liferay portlet styles can be found in /tomcat/webapps/ROOT/html/themes/_unstyled/css/portlet.css.

Complete Style Definitions1

Fonts
The font style definitions affect the font attributes only (font face, size, colour, style, etc).

Style Description Example
portlet-font Font attributes for the ‘normal’ fragment font. Used for the display of non-accentuated information. Normal Text
portlet-font-dim Font attributes similar to the .portlet-font but the colour is lighter. Dim Text

Messages
Message style definitions affect the rendering of a paragraph (alignment, borders, background colour, etc.), as well as text attributes.

Style Description Example
portlet-msg-status Status of the current operation. Progress: 80%
portlet-msg-info Help messages, general additional information, etc. Info about
portlet-msg-error Error messages. Portlet not available
portlet-msg-alert Warning messages. Timeout occurred, try again later
portlet-msg-success Verification of the successful completion of a task. Operation completed successfully

Sections
Section style definitions affect the rendering of markup sections such as table, div, and span (alignment, borders, background colour, etc) as well as their text attributes.

Style Description
portlet-section-header Table or section header
portlet-section-body Normal text in a table cell
portlet-section-alternate Text in every other row in the cell
portlet-section-selected Text in a selected cell range
portlet-section-subheader Text of a subheading
portlet-section-footer Table or section footnote
portlet-section-text Text that belongs to the table but does not fall in one of the other categories (e.g. explanatory or help text that is associated with the section).

Tables
Table style definitions affect the rendering (i.e. alignment, borders, background colour, etc.) as well as their text attributes.

Style Description
portlet-table-header Table header
portlet-table-body Normal text in a table cell
portlet-table-alternate Text in every other row in the table
portlet-table-selected Text in a selected cell range
portlet-table-subheader Text of a subheading
portlet-table-footer Table footer
portlet-table-text Text that belongs to the table but does not fall in one of the other categories (e.g. explanatory or help text that is associated with the table).

Forms
Form styles define the look-and-feel of the elements in an HTML form.

Style Description
portlet-form-label Text used for the descriptive label of the whole form (not the labels for fields).
portlet-form-input-field Text of the user input in an input field.
portlet-form-button Text on a button.
portlet-icon-label Text that appears beside a context dependent action icon.
portlet-dlg-icon-label Text that appears beside a ‘standard’ icon (e.g. OK or Cancel)
portlet-form-field-label Text for a separator of fields (e.g. checkboxes, etc.)
portlet-form-field Text for a field (not input field, e.g. checkboxes, etc)
portlet-form-field-label Text that appears beside a form field (e.g. input fields, checkboxes, etc.)
portlet-form-field Text for a field which is not input field (e.g. checkboxes, etc.)

Menus
Menu styles define the look-and-feel of the text and background of a menu structure. This structure may be embedded in the aggregated page or may appear as a context-sensitive popup menu.

Style Description
portlet-menu General menu settings such as background colour, margins, etc.
portlet-menu-item Normal, unselected menu item.
portlet-menu-item-selected Selected menu item.
portlet-menu-item-hover Normal, unselected menu item when the mouse hovers over it.
portlet-menu-item-hover-selected Selected menu item when the mouse hovers over it.
portlet-menu-cascade-item Normal, unselected menu item that has submenus.
portlet-menu-cascade-item-selected Selected sub-menu item that has sub-menus.
portlet-menu-cascade General sub-menu settings such as background colour, margins, etc.
portlet-menu-cascade-item A normal, unselected sub-menu item.
portlet-menu-cascade-item-selected Selected sub-menu item.
portlet-menu-cascade-item-hover Normal, unselected sub-menu item when the mouse hovers over it.
portlet-menu-cascade-item-hover-selected Selected sub-menu item when the mouse hovers over it.
portlet-menu-separator Separator between menu items.
portlet-menu-cascade-separator Separator between sub-menu items.
portlet-menu-content Content for a normal, unselected menu or sub-menu item.
portlet-menu-content-selected Content for a selected menu or sub-menu item.
portlet-menu-content-hover Content for an unselected menu or sub-menu item when the mouse hovers over it.
portlet-menu-content-hover-selected Content for a selected menu or sub-menu item when the mouse hovers over it.
portlet-menu-indicator Indicator that a menu item has an associated sub-menu.
portlet-menu-indicator-selected Indicator when the associated menu item is selected.
portlet-menu-indicator-hover Indicator when the associated menu item has the mouse hovering over it.
portlet-menu-indicator-hover-selected Indicator when the associated menu item is selected and has the mouse hovering over it.
portlet-menu-description Descriptive text for the menu (e.g. in a help context below the menu).
portlet-menu-caption Menu caption.

 1 Java™ Portlet Specification, version 2.0 (2008-01-11), Appendix C. http://jcp.org/aboutJava/communityprocess/final/jsr286/index.html

Share This