CODEWITHSUNDEEP
jqueryjquery-uijquery-plugins
Leem.fin
Leem.fin

Reputation: 42622

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

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?

Upvotes: 14

Views: 19733

Answers (3)

Victoria Stuart
Victoria Stuart

Reputation: 5082

In Firefox 84.0 (Jan 2021) this worked:

.ui-tabs .ui-tabs-nav li a {
  color: blue !important;
}

.ui-tabs .ui-tabs-nav li a {
  font-size: 12px !important;
  font-weight: bold !important;
  color: blue !important;
  // etc.
}

Note that I needed both of those specifications; i.e.: set color in both li a {} and a {}.

Upvotes: 0

Yi Jiang
Yi Jiang

Reputation: 50115

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.

ThemeRoller Font Settings

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

Upvotes: 4

Alon Eitan
Alon Eitan

Reputation: 12025

you need to change it in a css class like this

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

Upvotes: 26

Related Questions