CSS Classes for Fabasoft Folio Portlets
2017 R1 Update Rollup 1

CSS Classes for Fabasoft Folio PortletsPermanent link for this heading

This document describes the use of the different CSS styles to create a JSR168 compliant Fabasoft Folio Portlet. More examples for CSS styles can be found on the Fabasoft product CD or product DVD under Setup\ComponentseServices\Portlets\css in the portlet.css file.

CSS Styles “Section”Permanent link for this heading

portlet-section-headerPermanent link for this heading

The portlet-section-header class is used for a table header or a section header.

Example:

.portlet-section-header > th {
background-color: #D3DADD;
}

portlet-section-bodyPermanent link for this heading

The portlet-section-body class is used for a table cell with a white background.

Example:

.portlet-section-body > tr > td {
border-left: solid 1px #ffffff;
  border-right: solid 1px #
ffffff;
  padding-left: 4px;

}

.portlet-section-body > tr:hover, .portlet-section-body > tr:focus {
  background-color: #828F95;

  color: #ffffff;
}

portlet-section-alternatePermanent link for this heading

The portlet-section-alternate class is used for a table cell with a grey background.

Example:

.portlet-section-alternate {
  background: #E5E6E7;

}

.portlet-section-alternate > td {
  border-left: solid 1px #E5E6E7;

  border-right: solid 1px #E5E6E7;

}

.portlet-section-alternate:hover, .portlet-section-alternate:focus {
  background-color: #828F95;

  color: #
ffffff;
}

portlet-section-selectedPermanent link for this heading

The portlet-section-selected class is used for a selected cell range.

Example:

.portlet-section-selected,
td.portlet-section-selected,
tr.portlet-section-selected {
  background-color: #336699;

  color: #
ffffff;
  font-weight: bold;

  text-decoration: none;

}

CSS Styles “Form”Permanent link for this heading

portlet-form-labelPermanent link for this heading

The portlet-form-field-label class is used for the descriptive label of a field.

Example:

.portlet-form-field-label {
background-color: #F5F6F7;
  border-bottom: solid 1px white;

}

portlet-form-input-fieldPermanent link for this heading

The portlet-form-input-field class is used for an input field.

Example:

.portlet-form-input-field {
}

portlet-form-buttonPermanent link for this heading

The portlet-form-button class is used for the text on a button.

Example:

.portlet-form-button {
  background-color: #F5F6F7;

  border: 1px solid #828F95;

  display: block;

  height: 1.5em;

  margin: 4px 0px 4px
4px;
  min-width: 1.5em;

  padding: 1px;

  text-align: center;

  white-space:
nowrap;
  text-decoration: none;

}

CSS Styles “Menu”Permanent link for this heading

portlet-menuPermanent link for this heading

The portlet-menu class is used for general menu settings (e.g. background color, margins).

Example:

.portlet-menu {
border: 1px solid #828F95;
  margin-top: -3px;

  background-color: #
ffffff;
}

portlet-menu-item-hoverPermanent link for this heading

The portlet-menu-item-hover class is used for an unselected menu item, when the mouse hovers over it.

Example:

.portlet-menu-item-hover {
padding:1px 7px 0 3px;
  background-color: #336699;

  color: white;

}

portlet-menu-cascade-itemPermanent link for this heading

The portlet-menu-cascade-item is used for an unselected menu item with submenus.

Example:

.portlet-menu-cascade-item > td {
padding: 1px 7px 0 3px;
}

CSS Styles “Message”Permanent link for this heading

portlet-msg-infoPermanent link for this heading

The portlet-msg-info class is used for help messages and additional information.

Example:

.portlet-msg-info {
background: #DFF4FF url(../images/messages/info.png) no-repeat 6px 50%;
  border: 1px solid #A7CEDF;

  color: #34404F;

  display: block;

  font-weight: bold;

  margin: 2px auto 14px;

  padding: 6px
6px 6px 30px;
  text-align: left;

}

portlet-msg-errorPermanent link for this heading

The portlet-msg-error class is used for error messages.

Example:

.portlet-msg-error {
background: #fdd url(../images/messages/error.png) no-repeat 6px 50%;
  border: 1px solid #f00;

  display: block;

  font-weight: bold;

  margin: 2px auto 14px;

  padding: 6px
6px 6px 30px;
  text-align: left;

}

portlet-msg-alertPermanent link for this heading

The portlet-msg-alert class is used for warning messages.

Example:

.portlet-msg-alert {
background: #ffc url(../images/messages/alert.png) no-repeat 6px 20%;
  border: 1px solid #fc0;

  display: block;

  font-weight: bold;

  margin: 2px auto 14px;

  padding: 6px 6px 6px 30px;
  text-align: left;

}

GeneralPermanent link for this heading

Portlet Specific CSS ClassPermanent link for this heading

An own CSS class can be defined for each Fabasoft Folio portlet. So it is possible to define CSS styles that only apply for a certain portlet. The CSS class can be defined in the preferences of the Fabasoft Folio portlet.

Z-IndexPermanent link for this heading

The Fabasoft Folio Portlet uses z-index values up to 55000. Use higher values in order to arrange elements in front of the Fabasoft Folio portlet.