CSS Style Definitions
To achieve a common look and feel throughout the portal page, all portlets in the portal page should use a common CSS style sheet when generating content.
5 This appendix defines styles for a variety of logical units in the markup.
It follows the style being considered by the OASIS Web Services for Remote Portlets Technical
Committee.
PLT.C.1 Links (Anchor)
A custom CSS class is not defined for A the tag.
The entity should use the default 10 classes when embedding anchor tags.
PLT.C.2 Fonts
The font style definitions affect the font attributes only (font face, size, color, style, etc).
Style Description Example
portlet-font Font attributes for the “normal” fragment font. Normal Text
portlet-font-dim Font attributes similar to the .portlet.font but the color is lighter. Dim Text
If an portlet developer wants a certain font type to be larger or smaller, they should 15 indicate this using a relative size. For example:
<div class="portlet-font" style="font-size:larger">Important information</div>
<div class="portlet-font-dim" style="font-size:80%">Small and 20 dim</div>
PLT.C.3 Messages
Message style definitions affect the rendering of a paragraph (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
PLT.C.4 Sections
5 Section style definitions affect the rendering of markup sections such as table, div and span (alignment, borders, background color, 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).
PLT.C.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-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).
5 PLT.C.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 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)
PLT.C.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
5 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-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 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-hover Normal, unselected sub-menu item when the mouse hovers over it
portlet-menu-cascade-item-hoverselected 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
