title: Primefaces - Change background of tabView tabs
body: <p>I am working with PrimeFaces and trying to edit the background color of my <code>tabView</code> menu items but am unable to do so. 
  This is what is required:</p>
  
  <p><a href="https://i.stack.imgur.com/G964x.png" rel="nofollow"><img src="https://i.stack.imgur.com/G964x.png" alt="enter image description here"></a></p>
  
  <p>I am adding the <code>styleClass</code> attribute in xhtml. (Writing "..." instead of the long lists of attribute values that are not relevant to the problem.)</p>
  
  <pre><code>&lt;p:tabView styleClass="menu" value="..." dir="..." dynamic="true" activeIndex="..."&gt;
          &lt;p:ajax event="tabChange" listener="..." /&gt;
          &lt;p:tab &gt;
              &lt;div&gt; .... &lt;/div&gt;
          &lt;/p:tab&gt; 
  &lt;/p:tabView&gt;
  </code></pre>
  
  <p>The html generated is:</p>
  
  <pre><code>&lt;div id="tabView" class="..... menu"&gt;
  &lt;ul class="...." role="tablist"&gt;
      &lt;li class="...." role="tab" aria-expanded="true"&gt;
          &lt;a href="#"&gt;Menu Item 1&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="...." role="tab" aria-expanded="true"&gt;
          &lt;a href="#"&gt;Menu Item 2&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="ui-tabs-panels"&gt;
      &lt;div &gt; ..... &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The class menu is defined as following. The commented lines are the ones I have tried but give different results than required. </p>
  
  <pre><code>.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);
  }
  </code></pre>
  
  <p>The output is this:</p>
  
  <p><a href="https://i.stack.imgur.com/ooDLg.png" rel="nofollow"><img src="https://i.stack.imgur.com/ooDLg.png" alt="enter image description here"></a></p>
  
  <p>From what I understand, the problem is that the html generated applies my <code>menu</code> class to the <code>&lt;div&gt;</code> element, not the <code>&lt;ul&gt;</code>. Is there any way of adding this class to the <code>&lt;ul&gt;</code> tag? I have tried adding <code>styleClass="menu"</code> to the <code>&lt;p:ajax&gt;</code> and <code>&lt;p:tab&gt;</code> tags, but that does not work. 
  The Primefaces version is 3.5.</p>