View Full Version : Change font size of tab title

21 Jul 2010, 5:40 AM
Hi all,

I have a tabpanel with a few tabs in it. Problem is, i need to change the font size of the title of each tab.

I tried with 'cls' and 'itemCls', but that didn't work... also found a rather unorthodox solution which actually worked:

title: '<font style="font-size: 18px;">My tab title</font>'

But i hope there's a better solution, by changing the css without the html inserting?

21 Jul 2010, 6:31 AM
By poking it with Firebug and adding a rule to your in-house stylesheet which targets that element.

21 Jul 2010, 9:22 AM
yes, i found the class name... but how should i tell extjs that it only should be applied to a certain tabpanel? (and not other tabpanels). I don't want it as a default.

21 Jul 2010, 9:24 AM
Give your TabPanel a class. This is what class names are FOR. To enable labelling and then targeting of certain.. "classes" of element.

21 Jul 2010, 9:34 AM
i know what classes are for, although i'm not a pro in css, i just know the basics (using id or class to set css to an element).

The classname is 'span.x-tab-strip-text'.

However, it's in a span, one of the many little children of grandfather TabPanel (div). How should i target it then?
Something like:

// tabpanel config
cls: 'myclass'

and then in css:

.myclass span.x-tab-strip-text

or the other way around? Man, i really need to buy a good css book :(

21 Jul 2010, 9:51 AM
You don't need a book really. The W3C standards documents are good. The actual source of how things should work.


21 Jul 2010, 9:56 AM
wow, thank you! :)

Didn't know, haven't read it all yet, but only in "5.1 Pattern matching" i see things i didn't know it was possible with css.

btw, the forum uses lot's of console.info's these days...