Re: Styles for Tabs

[Oliver Rossmueller]

Andrew,
you are not wasting your time, it's working. Here is an example from my app:
the tabbedPane:
               <x:panelTabbedPane styleClass="tabs"
                 activeTabStyleClass="active"
                 inactiveTabStyleClass="inactive"
                 activeSubStyleClass="activeSub"
                 inactiveSubStyleClass="inactiveSub"
                 tabContentStyleClass="tabContent">
     

and the styles:
 .tabs {
    border-style: none;
    padding: 0px;
    border-spacing: 0px;
    border
    empty-cells: show;
    width: 100%;
    height: 100%;
 }
 td.active {
    background-color: #e7eff7 ! important;
    border-top: 2px outset #6392c6  ! important;
    border-right: 2px outset #6392c6 ! important;
    border-bottom: 0px none ! important;;;
    border-left: 2px outset #6392c6 ! important;
    width: 20% ! important;
 }
 td.inactive {
    background-color: #6392c6 ! important;
    border-top: 2px outset #6392c6  ! important;
    border-right: 2px outset #6392c6 ! important;
    border-bottom: 0px none ! important;;;
    border-left: 2px outset #6392c6 ! important;
    width: 20% ! important;
 }
 td.activeSub {
    background-color: #e7eff7 ! important;
    border-top: 0px none  ! important;
    border-right: 0px none ! important;
    border-bottom: 0px none ! important;;;
    border-left: 2px outset #6392c6 ! important;
 }
 td.inactiveSub {
    background-color: #6392c6 ! important;
    border-top: 2px outset #6392c6  ! important;
    border-right: 0px none ! important;
    border-bottom: 0px none ! important;
    border-left: 0px none ! important;
 }
 td.tabContent {
    background-color: #e7eff7 ! important;
    border-top: 0px none ! important;
    border-right: 2px outset #6392c6 ! important;
    border-bottom: 2px outset #6392c6 ! important;
    border-left: 2px outset #6392c6 ! important;
    padding: 5px ! important;
    height: 100%;
    min-height: 450px;
 }
 td.active input{
    background-color: #e7eff7 ! important;
    font-weight: bold;
    color: #000000;
 }
 td.inactive input {
    background-color: #6392c6 ! important;
    color: #ffffff;
    font-weight: bold;
 }
Very important are the '! important' statements, otherwise your 
stylesheet will not overrule the inline styles. I suppose that's what is 
missing for your stylesheet.

Oliver

[EMAIL PROTECTED] wrote:


Is there anyway to specify the color of an inactive tab? I cannot seem to
produce anything except the default grey.
I have defined a styleSheet class and have entered this into the
inactiveTabStyleClass attribute for the x:panelTabbedPane. This has no
effect.
Am I wasting my time here or is it possible to specify inactive tab colors?
Thanks in advance,
Andrew Louth
 


--
Oliver Rossmueller
Software Engineer and IT-Consultant
Hamburg, Germany
http://www.rossmueller.com