2

i have added rich:tabPanel and applied style for tabPanel. But unable to add background color for the tabs inside the tabPanel.Can someone tell the styleClass for rich:tab

XTML

<td width="80%" height="100%" style="vertical-align: top;"><rich:tabPanel
                                id="tabId" switchType="ajax" >
                                <rich:tab id="section1">
                                    <ui:include src="/pages/design/hrms/Section1.xhtml" />
                                </rich:tab>
                                <rich:tab id="section2" header="#{msg.lbl_section2}">
                                    <ui:include src="/pages/design/hrms/Section2.xhtml" />
                                </rich:tab>
                                <rich:tab id="section3" header="#{msg.lbl_section3}">
                                    <ui:include src="/pages/design/hrms/Section3.xhtml" />
                                </rich:tab>
                                <rich:tab id="section4" header="#{msg.lbl_section4}">
                                    <ui:include src="/pages/design/hrms/Section4.xhtml" />
                                </rich:tab>
                                <rich:tab id="section5" header="#{msg.lbl_section5}">
                                    <ui:include src="/pages/design/hrms/Section5.xhtml" />
                                </rich:tab>
                                <rich:tab id="section6" header="#{msg.lbl_section6}">
                                    <ui:include src="/pages/design/hrms/Section6.xhtml" />
                                </rich:tab>
                                <rich:tab id="section7" header="#{msg.lbl_section7}">
                                    <ui:include src="/pages/design/hrms/Section7.xhtml" />
                                </rich:tab>
                                <rich:tab id="section12" header="#{msg.lbl_section12}">
                                    <ui:include src="/pages/design/hrms/Section12.xhtml" />
                                </rich:tab>
                                <rich:tab id="section13" header="#{msg.lbl_section13}">
                                    <ui:include src="/pages/design/hrms/Section13.xhtml" />
                                </rich:tab>
                                <rich:tab id="section14" header="#{msg.lbl_section14}">
                                    <ui:include src="/pages/design/hrms/Section14.xhtml" />
                                </rich:tab>
                            </rich:tabPanel></td>

style.css

.rf-tab-hdr-spcr {
    background: rgb(255, 255, 255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% );
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%, rgba(255,
        255, 255, 1) ), color-stop(35%, rgba(255, 255, 255, 1) ),
        color-stop(100%, rgba(161, 214, 255, 1) ) ); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% );
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% );
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% ); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% ); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(             startColorstr='#ffffff',
        endColorstr='#a1d6ff', GradientType=0 ); /* IE6-9 */
}

enter image description here

4

2 回答 2

2

如果您使用 Firebug 进行验证，您可能会注意到您的 CSS 被 RichFaces 样式覆盖，因为您的 CSS 并不那么重要。

一种简单的更改方法是为您的h:form包装器设置一个 id 并将其添加到您的 CSS 中：

<h:form id="myForm">
    <!-- code -->

    <rich:tabPanel>
        <!-- code -->
    </rich:tabPanel>

    <!-- code -->
</h:form>

还有你的 style.css ：

#myForm .rf-tab-hdr-spcr {
    /* your css */
}
于 2013-06-17T07:58:44.233 回答
-1

样式类rich:tab可以在RichFaces3.x 指南和RichFaces4.x 指南中找到

正如在下面的屏幕截图中所尝试的，您可以覆盖rich-tab-active（用于活动选项卡的样式）和rich-tab-inactive（用于非活动选项卡的样式）。

我background-color为黄色background-color的活动选项卡和红色的非活动选项卡覆盖了属性。重要的是删除background-image属性（可以在屏幕截图中看到）。

在您的 JSP/XHTML 页面中尝试以下 CSS，

.rich-tab-active
{
  background-image : none;
  background-color: yellow;
}

丰富的标签

于 2013-06-17T08:03:20.270 回答