Saiyida Saiyida - 11 months ago 149
CSS Question

Primefaces - Change background of tabView tabs

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

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

enter image description here

I am adding the
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>

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 class="...." role="tab" aria-expanded="true">
<a href="#">Menu Item 2</a>
<div class="ui-tabs-panels">
<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
class to the
element, not the
. Is there any way of adding this class to the
tag? I have tried adding
to the
tags, but that does not work.
The Primefaces version is 3.5.

Answer Source

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?