Saiyida Saiyida - 1 month ago 28
CSS Question

Primefaces - Change background of tabView tabs

I am working with PrimeFaces and trying to edit the background color of my

tabView
menu items but am unable to do so.
This is what is required:

enter image description here

I am adding the
styleClass
attribute in xhtml. (Writing "..." instead of the long lists of attribute values that are not relevant to the problem.)

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


The html generated is:

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




The class menu is defined as following. The commented lines are the ones I have tried but give different results than required.

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


The output is this:

enter image description here

From what I understand, the problem is that the html generated applies my
menu
class to the
<div>
element, not the
<ul>
. Is there any way of adding this class to the
<ul>
tag? I have tried adding
styleClass="menu"
to the
<p:ajax>
and
<p:tab>
tags, but that does not work.
The Primefaces version is 3.5.

Answer

One way to apply the style class to the <ul /> element is to override the default TabView renderer. But i think this is a little bit excessive. Why not using the style class menu as an anchor only and create some style with a css selector like .menu > ul to style the list item under the <div /> element like you already did with the <li /> elements with your .menu ul li style?