Как добавить цвет фона для вкладок внутри rich: tabPanel

Я добавил rich: tabPanel и применяемый стиль для tabPanel. Но не может добавить цвет фона для вкладок внутри tabPanel.Can кто-то сказать styleClass для богатых: вкладкаКак добавить цвет фона для вкладок внутри rich: tabPanel

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

источник

2013-06-17 Vivek Shankar

Похоже, что называется 'tabId' –

Если вы проверите с помощью Firebug, вы, вероятно, заметите, что ваш CSS переопределен стилем RichFaces так как ваш CSS не так важен.

Один простой способ изменить это, чтобы установить идентификатор в вашей h:form обертку и добавить его в 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-17 07:58:44

Нету не работает приятель –

@ user1858826 Вы хотите этот стиль на вкладках или на вкладках spacers? Для первого вам нужно заменить '.rf-tab-hdr-spcr' на' .rf-tab-hdr', также вы должны предоставить '.rf-tab-hdr-act', когда вкладка активна. –

-1

Стиль классов для rich:tab можно найти здесь: RichFaces3.x guide и здесь для RichFaces4.x guide

Как показано на рисунке ниже, вы можете переопределить rich-tab-active (для стиля активной вкладки) и rich-tab-inactive (для стиля неактивной вкладки).

Я переопределил background-color атрибут для активной вкладки с желтым цветом и background-color неактивной вкладки с красным цветом. Важная вещь - удалить атрибут background-image (можно увидеть на снимке экрана).

Try ниже CSS в странице/XHTML JSP,

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

richtab

источник

2013-06-17 08:03:20

Как добавить цвет фона для вкладок внутри rich: tabPanel

ответ

Смежные вопросы