25.7.3. List of CSS Selectors

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.