• The first option would simply require to modify the theme CSS, by doing this you could change the fonts, the way tabs are rendered, colors and many other things but not change the content.
• The second option is to modify the provided JSPs, header.jsp and tabs.jsp. It gives you more flexibility than the previous solution on modifying the content. Links to legacy application could easily be added, URLs could be arranged differently, the CSS approach could be replaced by good old HTML, CSS style names could be changed... The drawback of this method compare to the next one is the limitation in what is accessible from the JSP.

There are currently two taglibs, containing tags for different approaches to layouts:

• portal-layout.tld
• theme-basic-lib.tld

Here are the four markup containers and their interface representation:

• Region - RegionRenderer
• Window - WindowRenderer
• Decoration - DecorationRenderer
• Portlet Content - PortletRenderer

A couple of things to know about the theming approach discussed below:

• Main premise behind this approach was to provide a clean separation between the business and presentation layer of the portal. As we go through each selector and explain the relation to the visual presentation on the page, this will become more apparent.
• The flexibility of the selectors used in the theme stylesheet allow a designer to very easily customize the visual aspects of the portal, thereby taking the responsibility off of the developers hands through allowing the designer to quickly achieve the desired effect w/out the need to dive down into code and/or having to deploy changes to the portal. This saves time and allows both developers and designers to focus on what they do best.
• This theme incorporates a liquid layout approach which allows elements on a page to expand/contract based on screen resolution and provides a consistent look across varying display settings. However, the stylesheet is adaptable to facilitate a fixed layout and/or combination approach where elements are pixel based and completely independent of viewport.
• The pieces that make up the portal theme consist of at least one stylesheet and any associated images. Having a consolidated set of files to control the portal look and feel allows administrators to effortlessly swap themes on the fly. In addition, this clean separation of the pieces that make up a specific theme will enable sharing and collaboration of different themes by those looking to get involved or contribute to the open source initiative.

• Red Border - portal-container
• Yellow Border - header-container
• Orange Border - content-container
• Blue Border - regionA/regionB
• Green Border - portlet-container

The following is a list of the selectors used in the theme stylesheet, including a brief explanation of how each selector is used in the portal:

• Portal Body Selector

  #body {
     background-color: #FFFFFF;
     background-image: url( images/header_bg.gif );
     background-repeat: repeat-x;
     margin: 0px;
     padding: 0px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     background-repeat: repeat-x;
     font-size: 11px;
     color: #656565;
  }

  Usage: This selector controls the background of the page, and can be modified to set a base font-family, layout margin, etc. that will be inherited by all child elements that do not have their own individual style applied. By default, the selector pulls an image background for the page.

• Portal Header Selectors

  #spacer {
     width: 770px;
     line-height: 0px;
     font-size: 0px;
     height: 0px;
  }

  Usage: Spacer div used to keep header at certain width regardless of display size. This is done to avoid overlapping of tab navigation in header. To account for different display sizes, this selector can be modified to force a horizontal scroll in the browser which eliminates any issue with overlapping elements in the header.

  #header-container {
    background-repeat: repeat-y;
    height: 100%;
    min-width: 1000px;
    width: 100%;
    position: absolute;
    bottom: 5px;*/
   }

  Usage: Wrapper selector used to control the position of the header on the page. This selector is applied as an ID on the table used to structure the header. You can adjust the attributes to reposition the header location on the page and/or create margin space on the top, right, bottom and left sides of the header.

  Screenshot:

  

  #header {
     height: 65px;
     width: 100%;
     padding: 0px;
     margin: 0px;
     z-index: 1;
  }

  Usage: This selector applies the header background image in the portal. It can be adjusted to accommodate a header background of a certain width/height or, as it currently does, repeat the header graphic so that it tiles across the header portion of the page.

  #logoName {
     background-image: url( images/logo.gif );
     background-repeat: no-repeat;
     float: left;
     width: 250px;
     height: 25px;
     z-index: 2;
     position: absolute;
     left: 20px;
     top: 10px;
  }

  Usage: Logo selector which is used to brand the header with a specific, customized logo. The style is applied as an ID on an absolutely positioned DIV element which enables it to be moved to any location on the page, and allows it to be adjusted to accommodate a logo of any set width/height.

• Portal Layout Region Selectors

  #portal-container {
  /* part of below IE hack to preserve min-width for portlet regions */
  /*width: 100%;*/
     margin: 4px 2% 0px 2%;
  
     padding: 0 350px 0 350px;
  }

  Usage: Wrapper for entire portal which starts/ends after/before the BODY tag (see red border in screen shot). The padding attribute for this selector is used to preserve a minimum width setting for the portlet regions (discussed below). Similar to body selector, this style can modified to create margin or padding space on the top, right, bottom and left sections of the page. It provides the design capability to accommodate most layouts (e.g. a centered look such as the phalanx theme where there is some spacing around the content of the portal, or a full width look as illustrated in the Industrial theme).

  Screenshot:

  

  /* min width for IE */
  #expander {
     position: relative;
     padding: 0 0 0 0;
  
     margin: 0 -350px 0 -350px;
     min-width: 770px;
     padding: 0 0 0 0;
  }
  
  /* min width hack for IE */
  #sizer {
     width: 100%;
  }
  
  /* IE Hack \*/
  * html #portal-container,
     * html #sizer,
     * html #expander {
     height: 0;
  }

  Usage: These selectors are used in conjunction with the above, portal-container, selector to preserve a minimum width setting for the portlet regions. This was implemented to maintain a consistent look across different browsers.

  #content-container {
     height: 100%;
     text-align: left;
     width: 100%;
     min-width: 770px;
     /*
     position: absolute;
     top: 70px;
     left: 0px; / * z-index: 1; * /
     / * part of below IE hack
  padding: 0 350px 0 350px; * /
     padding: 0px 100px 0px 0px;
     */
  }

  Usage: Wrapper that contains all regions in portal with the exception of the header (see orange border in screen shot). Its attributes can be adjusted to create margin space on page, as well as control positioning of the area of the page below the header.

  /* portlet regions within content-container. this includes footer-container. */
  #regionA {
     width: 30%;
     float: left;
     margin: 0px;
     padding: 0px;
     min-width: 250px; /*height: 300px;*/
  }

  Usage: First portlet region located within the content-container (see blue border in screen shot). This selector controls the width of the region as well as its location on the page. Designers can very easily reposition this region in the portal (e.g. swap left regionA with right regionB, etc.) by adjusting the attributes of this selector.

  #regionB {
     /* test to swap columns..
  margin: 0 30% 0 0; */
  
     /*two column layout
  margin: 0 0 0 30%;*/
     padding: 0px; /* test to add 3rd region in layout...*/
     width: 67%;
     float: left; /*height: 300px;*/
  }

  Usage: Second portlet region located within the content-container (see blue border in screen shot). Similar to regionA, this selector controls the width of the region as well as its location on the page.

  #regionC {
  /* inclusion of 3rd region - comment out for 2 region testing */
     padding: 0px;
     margin: 0px;
     width: 28%;
     float: left; /*hide 3rd region*/
     display: none;
  }

  Usage: Third portlet region located within the content-container (please refer to blue border in screen shot representing regionA and regionB for an example). Used for 3 column layout. Similar to regionA and regionB, this selector controls the width of the region as well as its location on the page.

  Screenshot:

  

  hr.cleaner {
  clear:both;
  height:1px;
  margin: -1px 0 0 0;
  padding:0;
  border:none;
  visibility: hidden;
  }
                       

  Usage: Used to clear floats in regionA, regionB and regionC DIVs so that footer spans bottom of page.

  #footer-container {
     padding: 10px;
     text-align: center;
     clear: both;
  }

  Usage: Footer region located towards the bottom of the content-container (see above screen shot). This region spans the entire width of the page, but can be adjusted (just like regionA, regionB and regionC) to take on a certain position and width/height in the layout.

• Portlet Container Window Selectors

  .portlet-container {
    padding: 10px;
  }

  Usage: Wrapper that surrounds the portlet windows (see green border in screen shot). Currently, this selector is used to create space (padding) between the portlets displayed in each particular region.

  .portlet-titlebar-title {
     color: #656565;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bold;
     white-space: nowrap;
     line-height: 100%;
     float: left;
     text-indent: 5px;
     padding-top: 5px;
     padding-bottom: 6px;
  }

  Usage: Class used to style the title of each portlet window. Attributes of this selector set font properties, indentation and position of title.

  .portlet-mode-container {
     float: right;
     padding-top: 4px;
     white-space: nowrap;
  }

  Usage: Wrapper that contains the portlet window modes that display in the top right section of the portlet windows.

  .portlet-titlebar-left {
     background-image: url( images/portlet-top-left.gif );
     background-repeat: no-repeat;
     width: 9px;
     height: 29px;
     min-width: 9px;
     background-position: bottom;
  }

  Usage: Used to style the top left corner of the portlet window. Each portlet window consists of one table that has 3 columns and 3 rows. This selector styles the first column (TD) in the first row (TR).

  Screenshot:

  

  .portlet-titlebar-center {
     background-image: url( images/portlet-top-middle.gif );
     background-repeat: repeat-x;
     height: 29px;
     background-position: bottom;
  }

  Usage: Used to style the center section of the portlet title bar. Each portlet window consists of one table that has 3 columns and 3 rows. This selector styles the second column (TD) in the first row (TR).

  Screenshot:

  

  .portlet-titlebar-right {
     background-image: url( images/portlet-top-right.gif );
     background-repeat: no-repeat;
     width: 10px;
     height: 30px;
     min-width: 10px;
     background-position: bottom left;
  }

  Usage: Used to style the top right corner of the portlet window. Each portlet window consists of one table that has 3 columns and 3 rows. This selector styles the third column (TD) in the first row (TR).

  Screenshot:

  

  .portlet-content-left {
     background-image: url( images/portlet-left-vertical.gif );
     background-repeat: repeat-y;
     width: 9px;
     min-width: 9px;
     /*
        width:20px;
        background-color:#FFFFFF;
        border-left: 1px solid #dfe8ed;
     */
  }

  Usage: Used to style the left hand vertical lines that make up the portlet window. Each portlet window consists of one table that has 3 columns and 3 rows. This selector styles the first column (TD) in the second row (TR).

  Screenshot:

  

  .portlet-content-center {
     vertical-align: top;
     padding: 0;
     margin: 0;
  }

  Usage: Used to style the center, content area where the portlet content is injected into the portlet window (see below screen). Attributes for this selector control the positioning of the portlet content as well as the background and font properties. Each portlet window consists of one table that has 3 columns and 3 rows. This selector styles the second column (TD) in the second row (TR).

  Screenshot:

  

  .portlet-body {
     background-color: #FFFFFF;
     padding: 0;
     margin: 0;
  }

  Usage: An extra selector for controlling the content section of the portlet windows (see below screen). This was added to better deal with structuring the content that gets inserted/rendered in the portlet windows, specifically if the content is causing display problems in a portlet.

  Screenshot:

  

  .portlet-content-right {
     background-image: url( images/portlet-right-vertical.gif );
     height: 100%;
     background-repeat: repeat-y;
     background-position: left;
     width: 5px;
     min-width: 5px;
     padding: 0;
     margin: 0;
     /*
        width:5px;
        background-color:#FFFFFF;
        border-right: 1px solid #dfe8ed;
     */
  }

  Usage: Used to style the right hand vertical lines that make up the portlet window. Each portlet window consists of one table that has 3 columns and 3 rows. This selector styles the third column (TD) in the second row (TR).

  Screenshot:

  

  .portlet-footer-left {
     background-image: url( images/portlet-bottom-left.gif );
     width: 9px;
     height: 4px;
     background-repeat: no-repeat;
     background-position: top right;
     min-width: 9px;
     padding: 0;
     margin: 0;
     /*
     background-color:#FFFFFF;
     border-bottom: 1px solid #98b7c6;
     border-left: 1px solid #dfe8ed;
     height:5px;
     */
  }

  Usage: Used to style the bottom left corner of the portlet window. Each portlet window consists of one table that has 3 columns and 3 rows. This selector styles the first column (TD) in the third row (TR).

  Screenshot:

  

  .portlet-footer-center {
     background-image: url( images/portlet-bottom-middle.gif );
     height: 4px;
     background-repeat: repeat-x;
     /*	background-color:#FFFFFF;
        border-bottom: 1px solid #98b7c6;
        height:5px;
     */
  }

  Usage: Used to style the bottom, center of the portlet window (i.e. the bottom horizontal line in the Industrial theme). Each portlet window consists of one table that has 3 columns and 3 rows. This selector styles the second column (TD) in the third row (TR).

  Screenshot:

  

  .portlet-footer-right {
     background-image: url( images/portlet-bottom-right.gif );
     width: 5px;
     height: 4px;
     background-repeat: no-repeat;
     min-width: 5px;
     /*
        background-color:#FFFFFF;
        border-bottom: 1px solid #98b7c6;
        border-right: 1px solid #dfe8ed;
        height:5px;
     */
  }

  Usage: Used to style the bottom right corner of the portlet window. Each portlet window consists of one table that has 3 columns and 3 rows. This selector styles the third column (TD) in the third row (TR).

  Screenshot:

  

• Portlet Window Mode Selectors

  .portlet-mode-maximized {
     background-image: url( images/ico_16_maximize.gif );
     background-repeat: no-repeat;
     width: 16px;
     height: 16px;
     float: left;
     display: inline;
     cursor: pointer;
     padding-left: 3px;
  }

  Usage: Selector used to display the portlet maximize mode. Attributes for this selector control the display and dimensions of the maximize icon, including the behavior of the mouse pointer when hovering the mode.

  .portlet-mode-minimized {
     background-image: url( images/ico_16_minimize.gif );
     background-repeat: no-repeat;
     width: 16px;
     height: 16px;
     float: left;
     display: inline;
     cursor: pointer;
     padding-left: 3px;
  }

  Usage: Selector used to display the portlet minimize mode. Attributes for this selector control the display and dimensions of the minimize icon, including the behavior of the mouse pointer when hovering the mode.

  .portlet-mode-normal {
     background-image: url( images/ico_16_normal.gif );
     width: 16px;
     height: 16px;
     background-repeat: no-repeat;
     float: left;
     display: inline;
     cursor: pointer;
     padding-left: 3px;
  }

  Usage: Selector used to display the portlet normal mode (i.e. the icon that when clicked, restores the portlet to the original, default view). Attributes for this selector control the display and dimensions of the normal icon, including the behavior of the mouse pointer when hovering the mode.

  .portlet-mode-help {
     background-image: url( images/ico_16_help.gif );
     width: 16px;
     height: 16px;
     background-repeat: no-repeat;
     float: left;
     display: inline;
     cursor: pointer;
     padding-left: 3px;
  }

  Usage: Selector used to display the portlet help mode. Attributes for this selector control the display and dimensions of the help icon, including the behavior of the mouse pointer when hovering the mode.

  .portlet-mode-edit {
     background-image: url( images/ico_edit.gif );
     background-repeat: no-repeat;
     width: 28px;
     height: 16px;
     float: left;
     display: inline;
     cursor: pointer;
     padding-left: 3px;
  }

  Usage: Selector used to display the portlet edit mode. Attributes for this selector control the display and dimensions of the edit icon, including the behavior of the mouse pointer when hovering the mode.

  .portlet-mode-remove {
     background-image: url( images/ico_16_remove.gif );
     background-repeat: no-repeat;
     width: 16px;
     height: 16px;
     float: left;
     display: inline;
     cursor: pointer;
     padding-left: 3px;
  }

  Usage: Currently not available. But here is the intended use: Selector used to display the portlet remove mode. Attributes for this selector control the display and dimensions of the remove icon, including the behavior of the mouse pointer when hovering the mode.

  .portlet-mode-view {
     background-image: url( images/ico_cancel.gif );
     background-repeat: no-repeat;
     width: 28px;
     height: 16px;
     float: left;
     display: inline;
     cursor: pointer;
     padding-left: 3px;
     padding-right: 20px;
  }

  Usage: Selector used to display the portlet view mode. Attributes for this selector control the display and dimensions of the view icon, including the behavior of the mouse pointer when hovering the mode.

  .portlet-mode-reload {
     background-image: url( images/ico_16_reload.gif );
     background-repeat: no-repeat;
     width: 16px;
     height: 16px;
     float: left;
     display: inline;
     cursor: pointer;
     padding-left: 3px;
  }

  Usage: Currently not available. But here is the intended use: Selector used to display the portlet reload mode. Attributes for this selector control the display and dimensions of the reload icon, including the behavior of the mouse pointer when hovering the mode.

• Copyright Selectors

  .portal-copyright {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     color: #5E6D7A;
  }
  
  a.portal-copyright {
     color: #768591;
     text-decoration: none;
  }
  
  a.portal-copyright:hover {
     color: #bcbcbc;
     text-decoration: underline;
  }

  Usage: The above three selectors are used to style copyright content in the portal. The portal-copyright selector sets the font properties (color, etc.), and the a.portal-copyright/a.portal-copyright:hover selectors style any links that are part of the copyright information.

• Table Selectors

  .portlet-table-header {
     background-color: #eef;
     padding: 0 5px 5px 5px;
     font-weight: bold;
     color: #656565;
     font-size: 12px;
     border-bottom: 1px solid #d5d5d5;
  }

  Usage: Intended for styling tables (specifically, the TH or table header elements) that get rendered within a portlet window.

  .portlet-table-body {
  
  }

  Usage: Intended for styling the table body element used to group rows in a table.

  .portlet-table-alternate {
     background-color: #E6E8E5;
     border-bottom: 1px solid #d5d5d5;
  }

  Usage: Used to style the background color (and possibly other attributes) for every other row within a table.

  .portlet-table-selected {
     color: #000;
     font-size: 12px;
     background-color: #CBD4E6;
  }

  Usage: Used to style text, color, etc. in a selected cell range.

  .portlet-table-subheader {
     font-weight: bold;
     color: #000;
     font-size: 12px;
  }

  Usage: Used to style a subheading within a table that gets rendered in a portlet.

  .portlet-table-footer {
     padding: 5px 5px 0 5px;
     font-weight: bold;
     color: #656565;
     font-size: 12px;
     border: none;
     border-top: 1px solid #d5d5d5;
  }

  Usage: Similar to portlet-table-header and portlet-table-body, this selector is used to style the table footer element which is used to group the footer row in a table.

  .portlet-table-text {
     padding: 3px 5px;
     border-bottom: 1px solid #d5d5d5;
  }

  Usage: 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). This selector can also be modified to provide styled text that can be used in all tables that are rendered within a portlet.

• FONT Selectors

  .portlet-font {
     color: #000000;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
  }

  Usage: Used to style the font properties on text used in a portlet. Typically this class is used for the display of non-accentuated information.

  .portlet-font-dim {
     color: #777777;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
  }

  Usage: A lighter version (color-wise) of the portlet-font selector.

• FORM Selectors

  .portlet-form-label {
     font-size: 10px;
     color: #656565;
  }

  Usage: Text used for the descriptive label of an entire form (not the label for each actual form field).

  .portlet-form-button {
     font-size: 10px;
     font-weight: bold;
     color: #FFFFFF;
     background-color: #5078aa;
     border-top: 1px solid #97B7C6;
     border-left: 1px solid #97B7C6;
     border-bottom: 1px solid #254869;
     border-right: 1px solid #254869;
  }

  Usage: Used to style portlet form buttons (e.g. Submit).

  .portlet-icon-label {
  
  }

  Usage: Text that appears beside a context dependent action icon.

  .portlet-dlg-icon-label {
  
  }

  Usage: Text that appears beside a "standard" icon (e.g Ok, or Cancel).

  .portlet-form-field-label {
     font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif;
     font-size: 10px;
     color: #000;
     vertical-align: bottom;
     white-space: nowrap
  }

  Usage: Selector used to style portlet form field labels.

  .portlet-form-field {
     font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif;
     font-size: 10px;
     color: #000; /*margin-top: 10px;*/
  }

  Usage: Selector used to style portlet form fields (i.e. INPUT controls, SELECT elements, etc.).

• LINK Selectors

  .portal-links:link {
     font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif;
     font-size: 11px;
     font-weight: bold;
     color: #242424;
     text-decoration: none;
  }
  
  .portal-links:hover {
     font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif;
     font-size: 11px;
     font-weight: bold;
     color: #5699B7;
     text-decoration: none;
  }
  
  .portal-links:active {
     font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif;
     font-size: 11px;
     font-weight: bold;
     color: #242424;
     text-decoration: none;
  }
  
  .portal-links:visited {
     font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif;
     font-size: 11px;
     font-weight: bold;
     color: #242424;
     text-decoration: none;
  }

  Usage: The above four selectors are used to style links in the portal. Each pseudo class (i.e. hover, active, etc.) provides a different link style.

• MESSAGE Selectors

  .portlet-msg-status {
     font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif;
     font-size: 12px;
     font-style: normal;
     color: #336699;
  }

  Usage: Selector used to signify the status of a current operation that takes place in the portlet (e.g. "saving results", "step 1 of 4").

  .portlet-msg-info {
     font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif;
     font-size: 12px;
     font-style: italic;
     color: #000;
  }

  Usage: Selector used to signify general information in a portlet (e.g. help messages).

  .portlet-msg-error {
     color: red;
     font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif;
     font-size: 12px;
     font-weight: bold;
  }

  Usage: Selector used to signify an error message in the portlet (e.g. form validation error).

  .portlet-msg-alert {
     font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif;
     font-size: 12px;
     font-weight: bold;
     color: #821717;
  }

  Usage: Selector used to style an alert that is displayed to the user.

  .portlet-msg-success {
     font-family: Verdana, Arial, Helvetica, Sans-Serif, sans-serif;
     font-size: 12px;
     font-weight: bold;
     color: #359630;
  }

  Usage: Selector used to indicate successful completion of an action in a portlet (e.g. "save successful").

• SECTION Selectors

  .portlet-section-header {
     font-weight: bold;
     color: #656565;
     font-size: 12px;
  }
  

  Usage: Table or section header.

  .portlet-section-body {
     color: #656565;
  }

  Usage: Normal text in a table cell.

  .portlet-section-alternate {
     background-color: #F2F2F2;
  }

  Usage: Used to style background color and text in every other table row.

  .portlet-section-selected {
     background-color: #CBD4E6;
  }

  Usage: Used to style background and font properties in a selected cell range.

  .portlet-section-subheader {
     font-weight: bold;
     font-size: 10px;
  }

  Usage: Used to style a subheading within a table/section that gets rendered in a portlet.

  .portlet-section-footer {
     font-size: 11px;
  }

  Usage: Used to style footer area of a section/table that gets rendered in a portlet.

  .portlet-section-text {
     font-size: 12px;
     font-style: italic;
  }

  Usage: Text that belongs to a section but does not fall in one of the other categories. This selector can also be modified to provide styled text that can be used in all sections that are rendered within a portlet.

• MENU Selectors

  .portlet-menu {}
                       

  Usage: General menu settings such as background color, margins, etc.

  .portlet-menu-item {
     color: #242424;
     text-decoration: none;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
  }

  Usage: Normal, unselected menu item.

  .portlet-menu-item:hover {
     color: #5699B7;
     text-decoration: none;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
  }

  Usage: Used to style hover effect on a normal, unselected menu item.

  .portlet-menu-item-selected {}
                       

  Usage: Applies to selected menu items.

  .portlet-menu-item-selected:hover {}
                       

  Usage: Selector styles the hover effect on a selected menu item.

  .portlet-menu-cascade-item {}
                       

  Usage: Normal, unselected menu item that has sub-menus.

  .portlet-menu-cascade-item-selected {}
                       

  Usage: Selected sub-menu item.

  .portlet-menu-description {}
                       

  Usage: Descriptive text for the menu (e.g. in a help context below the menu).

  .portlet-menu-caption {}
                       

  Usage: Selector used to style menu captions.

• WSRP Selectors

  .portlet-horizontal-separator {}
                       

  Usage: A separator bar similar to a horizontal rule, but with styling matching the page.

  .portlet-nestedTitle-bar {}
                       

  Usage: Allows portlets to mimic the title bar when nesting something.

  .portlet-nestedTitle {}
                       

  Usage: Allows portlets to match the textual character of the title on the title bar.

  .portlet-tab {}
                       

  Usage: Support portlets having tabs in the same style as the page or other portlets.

  .portlet-tab-active {}
                       

  Usage: Highlight the tab currently being shown.

  .portlet-tab-selected {}
                       

  Usage: Highlight the selected tab (not yet active).

  .portlet-tab-disabled {}
                       

  Usage: A tab which can not be currently activated.

  .portlet-tab-area {}
                       

  Usage: Top level style for the content of a tab.