Here is my customization. Note use if ! Important to override the default
styles
/* For tabbed Panes */
table.tabbedPane {
width: 100%! important;
vertical-align: top ! important;
border-collapse: separate ! important;
border-spacing: 0px ! important;
background-color: #FFFFFF;
}
td.activeTab {
width: 9% ! important;
font-size: 100% ! important;
background-color: #FFFFFF ! important;
border-top: 1px solid #91A0CA ! important;
border-left: 1px solid #91A0CA ! important;
border-right: 1px solid #91A0CA ! important;
border-bottom: 0px none ! important;
padding: 2px ! important;
horizontal-align:center ! important;
text-align: center ! important;
font-weight: bold ! important;
}
td.activeTab input {
background-color: #FFFFFF ! important;
font-size: 100% ! important;
horizontal-align: center ! important;
text-align: center ! important;
font-weight: bold ! important;
}
td.inactiveTab {
width: 9% ! important;
font-size: 100% ! important;
background-color: #EBEEF8 ! important;
border-top: 1px solid #91A0CA ! important;
border-left: 1px solid #91A0CA ! important;
border-right: 1px solid #91A0CA ! important;
border-bottom: 1px solid #91A0CA ! important;
padding: 2px ! important;
horizontal-align:center ! important;
text-align: center ! important;
font-weight: bold ! important;
}
td.inactiveTab input {
background-color: #EBEEF8 ! important;
font-size: 100% ! important;
horizontal-align:center ! 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;
border-bottom: 1px solid #91A0CA ! important;
border-left: 0px none ! important;
border-right: 0px none ! important;
border-top: 0px none ! important;
}
.myFaces_panelTabbedPane_activeHeaderCell input:hover,
.myFaces_panelTabbedPane_inactiveHeaderCell input:hover{
border-top: orange solid 1px ! important;
}
td.tabContent {
background-color: #FFFFFF ! important;
border: 0px none ! important;
vertical-align: top ! important;
padding-top: 5px ! important;
padding-left: 0px ! important;
padding-right: 0px ! important;
height: 100% ! important;
}
-----Original Message-----
From: Steve Horne [mailto:[EMAIL PROTECTED]
Sent: Friday, May 05, 2006 12:07 PM
To: [email protected]
Subject: panelTabbedPane styles
I am trying to change the look of a panelTabbedPane that differs from the
styles provided in the myfaces-all.jar
org.apache.myfaces.custom.tabbedpane.resource.defaultStyles.css.
Because the faces servlet injects the stylesheet AFTER my stylesheet, I
cannot seem to remove the border lines, button rendering, etc...
What is the 'correct' way to drastically change the look of a
panelTabbedPane?
--
A strong conviction that something must be done is the parent of many bad
measures.
- Daniel Webster
