How to change font size and tab width & height of jQuery-UI tabs

Question

I am using jQuery-UI to add tabs on my page, after I added it, I feel the tab font size and tab width and height are too large for my page. I would like to change the font size and tab width and height. How to do it?

Answer 1

you need to change it in a css class like this

.ui-tabs .ui-tabs-nav li a {font-size:7pt !important;}

Answer 2

Go to the jQuery UI ThemeRoller and create your own theme or modify the presets. On the right hand side under 'Font settings' there is the option to change the font size.

As for the size of the tabs, look at the CSS file that came with the jQuery UI package you downloaded. Find the selector for the jQuery UI tabs and edit the padding property:

.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }