Setting the classes for tabs is pretty straight forwarded. Just use the appropriate attributes in <t:panelTabbedPane>. Currently this does not entirely work for the tab's title.

Example that bolds the Active Tabs title

As an example, to bold the font on the active tab's title and set the background to white requires additional configuration. Two solution are presented below. One that uses a named CSS class and another that uses MyFaces default CSS class for the Active Tab's Header. In both cases their is a style sheet rule that contains input in the CSS selector for the CSS class. The properties in the associated declaration are applied the tab's title.

Using a named CSS Class

Tag to display a tabbed pane using the CSS class activeTabHeader

  <t:panelTabbedPane activeTabStyleClass="activeTabHeader">
  ...
  </t:panelTabbedPane>

Required stylesheet entries

  .activeTabHeader { background-color: white;}
  .activeTabHeader input { font-weight: bold;}

Using a the current default CSS Class

Tag to display a tabbed pane using the default CSS class

  <t:panelTabbedPane>
  ...
  </t:panelTabbedPane>

Required stylesheet entries

  .myFaces_panelTabbedPane_activeHeaderCell { background-color: white;}
  .myFaces_panelTabbedPane_activeHeaderCell input { font-weight: bold;}

Full Example

<t:panelTabbedPane
                  styleClass="tabbedPane"
                  activeTabStyleClass="activeTab"
                  inactiveTabStyleClass="inactiveTab"
                  disabledTabStyleClass="disabledTab"
                  activeSubStyleClass="activeSub"
                  inactiveSubStyleClass="inactiveSub"
                  tabContentStyleClass="tabContent">
...
</t:panelTabbedPane>

Adding !important at the end of each CSS line indicates that it would override the setting in the default CSS file.

table.tabbedPane {
    width: 100% !important;
    vertical-align: top !important;
    border-collapse: separate !important;
    border-spacing: 0px !important;
    background-color: #FFFFFF !important;
}

td.activeTab {
    width: 150px !important;
    font-size: 100% !important;
    background-color: #FFFFFF !important;
    border-top: 2px solid #91A0CA !important;
    border-left: 2px solid #91A0CA !important;
    border-right: 2px solid #91A0CA !important;
    border-bottom: 1px none !important;
    padding: 2px !important;
    text-align: center !important;
    font-weight: bold !important;
}
td.activeTab input {
    background-color: #FFFFFF !important;
    font-size: 100% !important;
    text-align: center !important;
    font-weight: bold !important;
}

td.inactiveTab {
    width: 150px !important;
    font-size: 100% !important;
    background-color: #EBEEF8 !important;
    border-top: 2px solid #91A0CA !important;
    border-left: 2px solid #91A0CA !important;
    border-right: 2px solid #91A0CA !important;
    border-bottom: 2px solid #91A0CA !important;
    padding: 2px !important;
    text-align: center !important;
    font-weight: bold !important;
}
td.inactiveTab input {
    background-color: #EBEEF8 !important;
    font-size: 100% !important;
    text-align:center !important;
    font-weight: bold !important;
}
td.activeSub {
    background-color: #FFFFFF !important;
    padding: 0px !important;
    border: 1px solid #FFFFFF !important;
}
td.inactiveSub {
    background-color: #FFFFFF !important;
    padding: 0px !important;
    border: 1px solid #FFFFFF !important;
}
td.myFaces_panelTabbedPane_emptyHeaderCell {
    background-color: #FFFFFF !important;
}

.myFaces_panelTabbedPane_activeHeaderCell input:hover,
.myFaces_panelTabbedPane_inactiveHeaderCell input:hover{
  color:#fff !important;
  background:#08c !important;
}

td.tabContent {
    background-color: #FFFFFF !important;
    border-left: 2px solid #91A0CA !important;
    border-right: 2px solid #91A0CA !important;
    border-bottom: 2px solid #91A0CA !important;
    vertical-align: top !important;
    padding-top: 5px !important;
    padding-left: 5px !important;
    height: 100% !important;
    text-align:left !important;
    width:765px;
}
  • No labels