Question

How to adjust the width and height of the tab in jsf 2 primefaces. Also please tel me how to control the text(color and font size) inside the tab? Thanks.

Answer 1

PrimeFaces uses the ThemeRoller CSS Framework. Go to the jQuery UI ThemeRoller page and create your own theme. Download the CSS file and include in your .xhtml pages.

<link type="text/css" rel="stylesheet" href="resources/css/skin.css" />

Add this to your web.xml so the default theme is not used:

<context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>none</param-value>
</context-param>

It is much easier to create a new theme then to figure which CSS rules to override to make the tabs look the way you want.

---

The jQuery UI tabs page has a section on Theming and the CSS rules it uses.

The tab width changes depending on the length of the text and the height is determined by the font-size.

To increase font size override the following CSS to something like this:

.ui-tabs {
    font-size:1.3em;
}