how to adjust width and height of the tab in jsf2 primefaces?

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

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;
}