Styling PrimeFaces TabView (vertical tabs with/without pictures)

A simple PrimeFaces TabView snippet of code is:

<p:tabView>

 <p:tab title="Rafael Nadal">               

  <h:panelGrid columns="2" cellpadding="10">

   <p:graphicImage library="default" name="images/rafa_l.jpg" width="70" height="100"/>

   <h:outputText value="Rafael 'Rafa' Nadal Parera (born 3 June 1986) is a Spanish professional tennis player currently ..." />

  </h:panelGrid>              

 </p:tab>

 <p:tab title="Novak Djokovic">

  <h:panelGrid columns="2" cellpadding="10">

   <p:graphicImage library="default" name="images/novak_l.jpg" width="70" height="100"/>

   <h:outputText value="Novak Djokovic (born 22 May 1987) is a Serbian professional tennis player who is currently ..." />

  </h:panelGrid>

 </p:tab>

 <p:tab title="Roger Federer">

  <h:panelGrid columns="2" cellpadding="10">

   <p:graphicImage library="default" name="images/roger_l.jpg" width="70" height="100"/>

   <h:outputText value="Roger Federer (born 8 August 1981) is a Swiss professional tennis player who is currently ..." />

  </h:panelGrid>

 </p:tab>

</p:tabView>

Now, this will produce something like in figure below:

But, let's suppose that we want something like this:

Well, the below CSS will do the trick:

.ui-tabs-vertical {

 width: 60em;

 height:38em;                

}

.ui-tabs-vertical .ui-tabs-nav {

 padding: .2em .1em .2em .2em;

 float: left;

 width: 12em;

}

.ui-tabs-vertical .ui-tabs-nav li {

 clear: left;

 width: 100%;

 padding-top:120px;

 background: url('#{resource["default:images/atp_d.png"]}');

 background-repeat: no-repeat;

 background-position: center;

 border-top-width: 1px !important;

 border-bottom-width: 1px !important;

 border-right-width: 1px !important;   

 -webkit-transform: rotate(270deg);

 -moz-transform: rotate(270deg);

 -o-transform: rotate(270deg);

}

           

.ui-tabs-vertical .ui-tabs-nav li a {

 display:block;              

 padding-left: 30px;     

 /*

  you ca apply rotate here, to rotate only the text

  of course, afterwards, you have to perform the proper adjustments

  -webkit-transform: rotate(270deg);

  -moz-transform: rotate(270deg);

  -o-transform: rotate(270deg);

 */

}

.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected {

 background: url('#{resource["default:images/atp_s.png"]}');

 background-repeat: no-repeat;

 background-position: center;                           

}

.ui-tabs-vertical .ui-tabs-panel {

 padding: 1em;

 float: right;

 width: 40em;

}    

/* this will affect the fonts of all PrimeFaces components */

.ui-widget {

  font-family: Rockwell, 'Courier Bold', Courier, Georgia, Times, 'Times New Roman', serif;

  font-size: 12px;

  font-style: normal;

  font-variant: normal;

  font-weight: 400;

  line-height: 20px;               

 }              

Do not forget to attached the CSS code to the tab view:

<p:tabView styleClass="ui-tabs-vertical">

  ...

</p:tabView>

Or, if you need to obtain vertical tabs without pictures, as below:

Then you can use this CSS code:

.ui-tabs-vertical {

 width: 50em;

 height:50em;

 -webkit-transform: rotate(270deg);

 -moz-transform: rotate(270deg);

 -o-transform: rotate(270deg);

}                                 

        

.ui-tabs-vertical .ui-tabs-panel {                       

 float: left;

 height:45em;

 padding-left:30px;               

 -webkit-transform: rotate(90deg);

 -moz-transform: rotate(90deg);

 -o-transform: rotate(90deg);

}  

Or, make a smaller one and place it in a PrimeFaces layout (center panel):

.ui-tabs-vertical {

 width: 40em;

 height:40em;

 -webkit-transform: rotate(270deg);

 -moz-transform: rotate(270deg);

 -o-transform: rotate(270deg);

}                                 

        

.ui-tabs-vertical .ui-tabs-panel {                       

 float: left;

 height:35em;

 padding-left:30px;               

 -webkit-transform: rotate(90deg);

 -moz-transform: rotate(90deg);

 -o-transform: rotate(90deg);
}  

Most likely this snippet of CSS can be produced more optimal, so feel free to modify it accordingly.

Complete code on GitHub.