Primefaces - Hintergrund der tabView-Registerkarten ändern

Question

Ich arbeite mit PrimeFaces und versuche, die Hintergrundfarbe meiner tabView Menüelemente zu bearbeiten, kann dies aber nicht. Dies ist, was erforderlich ist:

Ich füge das styleClass Attribut in xhtml. (. Schreiben "..." anstelle der langen Listen von Attributwerten, die nicht relevant für das Problem sind)

<p:tabView styleClass="menu" value="..." dir="..." dynamic="true" activeIndex="..."> 
     <p:ajax event="tabChange" listener="..." /> 
     <p:tab > 
      <div> .... </div> 
     </p:tab> 
</p:tabView> 

Die html erzeugte:

<div id="tabView" class="..... menu"> 
<ul class="...." role="tablist"> 
    <li class="...." role="tab" aria-expanded="true"> 
     <a href="#">Menu Item 1</a> 
    </li> 
    <li class="...." role="tab" aria-expanded="true"> 
     <a href="#">Menu Item 2</a> 
    </li> 
</ul> 
<div class="ui-tabs-panels"> 
    <div > ..... </div> 
</div> 

Die Klasse Menü ist wie folgt definiert. Die kommentierten Zeilen sind diejenigen, die ich ausprobiert habe, aber andere Ergebnisse als erforderlich geben.

.menu { 
    font-family: Open Sans; 
    /* first attempt: 
    background-size: 5px; 
    background-color: #fff; 
    */ 
    /* second attempt: 
    background: linear-gradient(180deg, #FFF 10px, #ebeff2 100%); 
    */ 
    /* third attempt: 
    background-color: #fff; 
    */ 
} 
.menu ul li { 
    background-color: #fff; 
    background-image: url(../resources/images/menu_sep.png); 
} 

Der Ausgang ist dies:

Von dem, was ich verstehe, ist das Problem, dass die HTML-generierte gilt meine menu Klasse das <div> Element, nicht die <ul>. Gibt es eine Möglichkeit, diese Klasse zum <ul> Tag hinzuzufügen? Ich habe versucht, styleClass="menu" zu den <p:ajax> und <p:tab> Tags hinzuzufügen, aber das funktioniert nicht. Die Primefaces-Version ist 3.5.

Answer 1

Eine Möglichkeit zum Anwenden der Stilklasse auf das Element <ul /> besteht darin, den standardmäßigen Renderer TabView zu überschreiben. Aber ich denke, das ist ein bisschen übertrieben. Warum nicht die Stil-Klasse Menü als Anker nur verwenden und etwas Stil mit einem CSS-Selektor wie .menu > ul erstellen, um das Listenelement unter dem <div /> Element wie Sie bereits mit den <li /> Elementen mit Ihrem .menu ul li Stil stylen?