CODEWITHSUNDEEP
cssjsfprimefacestabview
user5215301
user5215301

Reputation:

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.

Upvotes: 1

Views: 2781

Answers (1)

irieill
irieill

Reputation: 1252

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?

Upvotes: 1

Related Questions