css

[Joe Jose]

Hi,

CSS not working well with me. I am trying to give styles in tabbed pane. But that doesn't seem to work. Here is the code :
css :

    
 
table.tabbedPane {
     width: 100% !important;
     vertical-align: top !important;
     border-collapse: separate !important;
     border-spacing: 0px !important;
     background-color: red !important;
     border-style: solid
 }
 
 td.activeTab {
border-style: solid; 
border-width: 1px; 
border-left-color: #FFFFFF; 
border-right-color: #888888; 
border-top-color: FFFFFF;         
background-color: #EEEEEE; 
font-size: 10pt; 
font-weight: bold; 
padding-left: 6px; 
padding-right: 6px; 
padding-top: 2px; 
padding-bottom: 2px; 
 
 }
 

jsp :

    
<x:stylesheet path="/style/InvStyle.css"/>
 
<t:panelTabbedPane styleClass="tabbedPane" activeTabStyleClass="activeTab">
 
<t:panelTab id="work" label="Work" >
<h:selectManyListbox id="deptList" >
<f:selectItems value="#{CreateQuoteBean.deptList}"/>
</h:selectManyListbox> 
<h:commandButton id="add" action="addWork" value=">" styleClass="DataList" />
<h:commandButton id="remove" action="removeWork" value="<" styleClass="DataList" />
</t:panelTab>
 
<t:panelTab id="material" label="Material" ><t:selectOneRadio value="5">
<f:selectItem itemValue="0" itemLabel="First Choice" />
<f:selectItem itemValue="1" itemLabel="Second Choice" />
</t:selectOneRadio>
</t:panelTab>
 
</t:panelTabbedPane>

Could you please tell me your thoughts on it ?

Thanks,
Joe

[A. Dusi]

Check if this helps:
http://www.nabble.com/Dynamically-adding-tabs-to-t:panelTabbedPane-t1785535.html

Also check this out:
http://wiki.apache.org/myfaces/SettingTabClasses

[Joe Jose]

Originally posted by A. Dusi:
Check if this helps:
http://www.nabble.com/Dynamically-adding-tabs-to-t:panelTabbedPane-t1785535.html

Also check this out:
http://wiki.apache.org/myfaces/SettingTabClasses

Thanks for that. But this doesn't happen any changes to the tab. I don't unserstand why the CSS cannt apply to the jsf. But the strange thing is , I am calling a css from another application and that does effect on the buttons and tables (not the tab ).

Here again is the code I used :

jsp/jsf :

    
<link rel="stylesheet" href="/dstio/jsp/styles/dstio.css" type="text/css" />[B][css from another application][/B]
<link rel="stylesheet" href="/style/InvStyle.css" type="text/css"/>[B][current app][/B]
 
<t:panelTabbedPane
styleClass="tabbedPane"
activeTabStyleClass="activeTab"
inactiveTabStyleClass="inactiveTab"
disabledTabStyleClass="disabledTab"
activeSubStyleClass="activeSub"
inactiveSubStyleClass="inactiveSub"
tabContentStyleClass="tabContent">

css :

    
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;
    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;
    
}

Is this the correct way of use of CSS like path, name etc.. ? I am confused. I can get the styles on tab back grounds, but cannot change the color of the tab headers. Please help me with your thoughts.

Thanks,
Joe.

[Joe Jose]

Hi,

I got it solved. css URL should be absolute.

I had given like

<link rel="stylesheet" href="/style/invstyle.css" type="text/css"/>

instead of

    
<link rel="stylesheet" href="[B]/invoicesystem/style[/B]/invstyle.css" type="text/css"/>

Thanks eveyone who give it a try.

Joe.