10.5 CSS Style Definitions
One of the goals of an aggregated page is a common look-and-feel across the Portlets contained on that page [A500]. This not only affects the decorations around the Portlets, but also their content. Using a common CSS style sheet for all Portlets, and defining a set of standard styles, provides this common look-and-feel without requiring the Portlets to generate Consumer-specific markup. Portlets SHOULD use the CSS style definitions from this specification in order to participate in a uniform display of their content by various Consumers. For markup types that support CSS stylesheets, Consumers MUST supply a CSS stylesheet to the End-User's agent with definitions for the classes defined in [Section 10.5] of this specification.
This section defines styles for a variety of logical units in the markup.
10.5.1 Links (Anchor)
A custom CSS class is not defined for the <a> tag. The Portlet should use the default classes when embedding anchor tags.
10.5.2 Fonts
The font style definitions affect the font attributes only (i.e. font face, size, color, 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 color is lighter. | Dim Text |
If 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>
10.5.3 Messages
Message style definitions affect the rendering of a paragraph (i.e. alignment, borders, background color, 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 |
10.5.4 Sections
Section style definitions affect the rendering of markup sections such as div and span (i.e. alignment, borders, background color, etc.) as well as their text attributes.
| Style | Description |
| portlet-section-header | Section header |
| portlet-section-body | Normal text |
| portlet-section-alternate | Text in every other row in the section |
| portlet-section-selected | Text in a selected range |
| portlet-section-subheader | Text of a subheading |
| portlet-section-footer | Section footer |
| portlet-section-text | Text that belongs to the section but does not fall in one of the other categories (e.g. explanatory or help text that is associated with the section). |
10.5.5 Tables
Table style definitions affect the rendering (i.e. alignment, borders, background color, etc.) as well as their text attributes.
| Style | Description |
| portlet-table | Base class for a table |
| 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-column-alternate | Text in alternate column in a table |
| portlet-table-column-sortable | Header for a column on which the table's rows can be sorted |
| portlet-table-column-sortedUp | Header for a column on which the table's rows are sorted in an ascending manner |
| portlet-table-column-sortedDown | Header for a column on which the table's rows are sorted in a descending manner |
| portlet-table-selected | Text in a selected cell range |
| portlet-table-row-hover | Row over which the user's pointer is hovering |
| portlet-table-column-hover | Column over which the user's pointer is hovering |
| 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). |
| portlet-table-pager | Container for controls that allow paging the table to additional information |
10.5.6 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 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) |
10.5.7 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 color, 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 | General sub-menu settings such as background color, 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-first-selected | First selected sub-menu item |
| portlet-menu-cascade-item-last-selected | Last 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 an 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 hover over it |
| portlet-menu-indicator-hover-selected | Indicator when the associated menu item is selected and has the mouse hover over it |
| portlet-menu-description | Descriptive text for the menu (e.g. in a help context below the menu) |
| portlet-menu-caption | Menu caption |
10.5.8 Tabbed Panels
Tabbed Panel styles define the look-and-feel of the text and background of a set of tabs and their associated panels.
| Style | Description |
| portlet-tabbed-panel | The base container for a set of tabbed panels |
| portlet-tab | A tab representing one panel within the set of tabbed panels |
| portlet-tab-selected | The tab representing the panel which is currently being rendered for the End-User |
| portlet-tab-disabled | A disabled tab within the set of tabbed panels |
| portlet-tab-panel | A panel within the set of tabbed panels which is not currently being rendered for the End-User |
| portlet-tab-panel-selected | The panel which is currently being rendered for the End-User |
| portlet-tabbed-panel-header | A header for a set of tabbed panels |
| portlet-tabbed-panel-footer | A footer for a set of tabbed panels |
10.5.9 Trees
Tree styles define the look-and-feel for displaying information in a tree style.
| Style | Description |
| portlet-tree | The base container for a tree |
| portlet-tree-node | A container for a node within the tree |
| portlet-tree-node-selected | A selected node |
| portlet-tree-node-hover | A node over which the user's pointer is hovering |
| portlet-tree-node-hover-selected | A selected node over which the user's pointer is hovering |
| portlet-tree-node-label | The label describing a node |
| portlet-tree-node-icon | An icon for the node |
| portlet-tree-node-expand | Control for expanding the subtree under the node |
| portlet-tree-node-collapse | Control for hiding the subtree under the node |
| portlet-tree-leaf | A container for a leaf node within the tree |
| portlet-tree-leaf-selected | A selected leaf node |
| portlet-tree-leaf-hover | A leaf node over which the user's pointer is hovering |
| portlet-tree-leaf-hover-selected | A selected leaf node over which the user's pointer is hovering |
| portlet-tree-leaf-label | The label describing the leaf node |
| portlet-tree-leaf-icon | An icon for the leaf node |
10.5.10 Calendars
Calendar styles define the look-and-feel for displaying a calendar.
| Style | Description |
| portlet-calendar | The base container for a calendar |
| portlet-calendar-header-year | The current year for the displayed calendar |
| portlet-calendar-header-month | The current month for the displayed calendar |
| portlet-calendar-header-weekday-name | The name of the day of the week |
| portlet-calendar-day | A day on the calendar |
| portlet-calendar-today | Today on the calendar |
| portlet-calendar-day-selected | The currently selected day |
| portlet-calendar-day-hover | The day over which the user's pointer is hovering |
| portlet-calendar-day-hover-selected | A selected day over which the user's pointer is hovering |
| portlet-calendar-day-invalid | A day on the displayed calendar which is not available for selection |
| portlet-calendar-invalid-date | Style for error message saying that an invalid date has been entered/selected |