(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).

StyleDescriptionExample
portlet-fontFont attributes for the ‘normal’ fragment font. Used for the display of non-accentuated information.Normal Text
portlet-font-dimFont 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.

StyleDescriptionExample
portlet-msg-statusStatus of the current operation.Progress: 80%
portlet-msg-infoHelp messages, general additional information, etc.Info about
portlet-msg-errorError messages.Portlet not available
portlet-msg-alertWarning messages.Timeout occurred, try again later
portlet-msg-successVerification 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.

StyleDescription
portlet-section-headerTable or section header
portlet-section-bodyNormal text in a table cell
portlet-section-alternateText in every other row in the cell
portlet-section-selectedText in a selected cell range
portlet-section-subheaderText of a subheading
portlet-section-footerTable or section footnote
portlet-section-textText 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.

StyleDescription
portlet-table-headerTable header
portlet-table-bodyNormal text in a table cell
portlet-table-alternateText in every other row in the table
portlet-table-selectedText in a selected cell range
portlet-table-subheaderText of a subheading
portlet-table-footerTable footer
portlet-table-textText 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.

StyleDescription
portlet-form-labelText used for the descriptive label of the whole form (not the labels for fields).
portlet-form-input-fieldText of the user input in an input field.
portlet-form-buttonText on a button.
portlet-icon-labelText that appears beside a context dependent action icon.
portlet-dlg-icon-labelText that appears beside a ‘standard’ icon (e.g. OK or Cancel)
portlet-form-field-labelText for a separator of fields (e.g. checkboxes, etc.)
portlet-form-fieldText for a field (not input field, e.g. checkboxes, etc)
portlet-form-field-labelText that appears beside a form field (e.g. input fields, checkboxes, etc.)
portlet-form-fieldText 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.

StyleDescription
portlet-menuGeneral menu settings such as background colour, margins, etc.
portlet-menu-itemNormal, unselected menu item.
portlet-menu-item-selectedSelected menu item.
portlet-menu-item-hoverNormal, unselected menu item when the mouse hovers over it.
portlet-menu-item-hover-selectedSelected menu item when the mouse hovers over it.
portlet-menu-cascade-itemNormal, unselected menu item that has submenus.
portlet-menu-cascade-item-selectedSelected sub-menu item that has sub-menus.
portlet-menu-cascadeGeneral sub-menu settings such as background colour, margins, etc.
portlet-menu-cascade-itemA normal, unselected sub-menu item.
portlet-menu-cascade-item-selectedSelected sub-menu item.
portlet-menu-cascade-item-hoverNormal, unselected sub-menu item when the mouse hovers over it.
portlet-menu-cascade-item-hover-selectedSelected sub-menu item when the mouse hovers over it.
portlet-menu-separatorSeparator between menu items.
portlet-menu-cascade-separatorSeparator between sub-menu items.
portlet-menu-contentContent for a normal, unselected menu or sub-menu item.
portlet-menu-content-selectedContent for a selected menu or sub-menu item.
portlet-menu-content-hoverContent for an unselected menu or sub-menu item when the mouse hovers over it.
portlet-menu-content-hover-selectedContent for a selected menu or sub-menu item when the mouse hovers over it.
portlet-menu-indicatorIndicator that a menu item has an associated sub-menu.
portlet-menu-indicator-selectedIndicator when the associated menu item is selected.
portlet-menu-indicator-hoverIndicator when the associated menu item has the mouse hovering over it.
portlet-menu-indicator-hover-selectedIndicator when the associated menu item is selected and has the mouse hovering over it.
portlet-menu-descriptionDescriptive text for the menu (e.g. in a help context below the menu).
portlet-menu-captionMenu caption.

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

Share This