[ http://issues.apache.org/jira/browse/MYFACES-276?page=comments#action_12313099 ]
Bruno Aranda commented on MYFACES-276: -------------------------------------- Actually, you *can* override the styles of the tabbed pane using the !important css tag. I copy here the contents of a mail sent by Alfe to the mailing list some time ago (thread: http://www.mail-archive.com/[email protected]/msg04006.html): [SNIPPET] We are using the following: bla.jsp: <x:panelTabbedPane styleClass="tabbedPane" activeTabStyleClass="activeTab" inactiveTabStyleClass="inactiveTab" disabledTabStyleClass="disabledTab" activeSubStyleClass="activeSub" inactiveSubStyleClass="inactiveSub" tabContentStyleClass="tabContent"> Our used CSS layout class file contains the following: table { border-collapse:collapse ! important; border-spacing:0px ! important; padding:0px ! important; border-width:0px ! important; empty-cells:show ! important; } td { border-spacing:0px ! important; padding:0px ! important; border-width:0px ! important; } th { font-weight:normal ! important; font-size:80% ! important; text-align:center ! important; border:2px solid ! important; border-color:black #ccc #ccc black ! important; padding-top:0px ! important; padding-left:5px ! important; padding-right:5px ! important; padding-bottom:0px ! important; background:#d8d9d4 ! important; white-space:nowrap ! important; } table.tabbedPane { width:66ex ! important; height:40ex ! important; vertical-align:top ! important; border-collapse:separate ! important; border-spacing:0px ! important; } td.activeTab { background-color:#e0e0ec ! important; border-top:2px solid #fff ! important; border-left:2px solid #fff ! important; border-right:2px solid #aaacae ! important; border-bottom:0px none ! important; padding:2px ! important; height:4ex ! important; font-size:80% ! important; horizontal-align:center ! important; text-align:center ! important; -moz-border-radius-topleft:20px ! important; -moz-border-radius-topright:20px ! important; } td.activeTab input { background-color:#e0e0ec ! important; font-size:80% ! important; horizontal-align:center ! important; text-align:center ! important; } td.inactiveTab { background-color:#c8c8d8 ! important; border-top:2px solid #e3e5e7 ! important; border-left:2px solid #ebecef ! important; border-right:2px solid #8a8c8e ! important; border-bottom:0px none ! important; padding:2px ! important; height:4ex ! important; font-size:80% ! important; horizontal-align:center ! important; text-align:center ! important; height:4ex ! important; -moz-border-radius-topleft:20px ! important; -moz-border-radius-topright:20px ! important; } td.inactiveTab input { background-color:#c8c8d8 ! important; font-size:80% ! important; horizontal-align:center ! important; text-align:center ! important; } td.activeSub { background-color:#e0e0ec ! important; padding:0px ! important; border-left: 2px solid #fff ! important; border-right: 2px solid #aaacae ! important; } td.inactiveSub { background-color:#fff ! important; padding:0px ! important; } td.tabContent { background-color:#e0e0ec ! important; border-top: 0px none ! important; border-left: 2px solid #fff ! important; border-right: 2px solid #aaacae ! important; border-bottom: 2px solid #aaacae ! important; vertical-align:top ! important; padding:20px ! important; height:100% ! important; text-align:justify ! important; } The "! important" is a way to tell the browser that this adjustment shall have priority over a builtin style sheet or similar. Depends on the browser whether it is necessary and/or successfull ;-) The given configuration works in all important cases we testet (exceptions like the not-so-important konqueror exist). HTH, Alfe [/SNIPPET] However I think we should find a 'more direct' solution for this soon... > HtmlTabbedPaneRenderer - Enable setting of built in style attributes by own > style-class > --------------------------------------------------------------------------------------- > > Key: MYFACES-276 > URL: http://issues.apache.org/jira/browse/MYFACES-276 > Project: MyFaces > Type: Improvement > Versions: 1.0.9 beta > Environment: Linux/Tomcat 5.5.9/jdk1.5_03 > Reporter: Andy > > Hi ! > I would like to override some style attributes by my own style-class for the > 'panelTabbedPane' and the 'panelTab'. > This only works for attributes not defined as 'built in' by the > TabbedPaneRenderer . > For instance: If you look at the HtmlTabbedPaneRenderer-Code-> > private static final String ACTIVE_HEADER_CELL_STYLE = > "border-top: 2px outset #CCCCCC; " + > "border-right: 2px outset #CCCCCC; " + > "border-bottom: 0px none; " + > "border-left: 2px outset #CCCCCC; " + > "text-align: center; "; > The rendered html-page contains this attributes in the style-property of the > <td>-tag and I can not override it by use of my own class-attrbute (pointing > to my css-file). > For example: > <td style="border-top: 2px outset #CCCCCC; border-right: 2px outset #CCCCCC; > border-bottom: 0px none; border-left: 2px outset #CCCCCC; text-align: center; > background-color:#FFFFFF" class="deviceActiveTabStyle"> > Styles defined by your style-attribute override styles defined by my > class-attribute ! > Would be great to see this enhancement! > Thanks for your outstanding work and best regards, Andi -- This message is automatically generated by JIRA. - If you think it was sent incorrectly contact one of the administrators: http://issues.apache.org/jira/secure/Administrators.jspa - For more information on JIRA, see: http://www.atlassian.com/software/jira
