View Full Version : How to change the toolbar font size

9 Sep 2011, 1:57 PM
Gosh I hate to post such a basic question but I cannot seem to figure this out. I have used Firefox to inspect the toolbar elements and it appears that .x-toolbar is the class that sets the font size for the toolbar. So I have tried the following:

.app-toolbar .x-toolbar {

and set the 'cls' config property of my toolbar to .app-toolbar, yet nothing changes.

I've even tried globally overriding .x-toolbar and even though Firefox shows that the font size for .x-toolbar is my new font size, the font in the toolbar remains unchanged. So I suspect that the font size for toolbar buttons is getting set somewhere programmatically and I don't know how to override it. The only method I've found that works is to wrap the toolbar button text with html markup that specifies the font size but of course I don't want to do that. I've been programming with Ext 3.x for years and have done a lot of style overrides with my own classes so I'm particularly frustrated that I can't figure this one out by myself. Any suggestions would be greatly appreciated. No doubt I have much bigger fish to fry with this project than the toolbar font size but it would be nice to get this one solved.

11 Sep 2011, 10:27 AM
I must admit this seemed a little more complicated than I would have expected but the following selectors seemed to do it for me.

tbar: {
cls: 'big-text',
xtype: 'toolbar',
items: [

/* Text items */
.big-text .x-toolbar-text {
font-size: 14px;

/* Button text */
.big-text .x-btn-default-toolbar-small .x-btn-inner {
font-size: 14px;

11 Sep 2011, 4:01 PM
Thanks skirtle! That worked. I guess next time I'll dig a little deeper into the code to try and figure it out myself. I thought I could rely on Firebug's element inspector to see what classes are being applied and from there determine which one to override. Perhaps I should have just gone one by one through each class that is applied to every wrapping element of the button to determine where the font size was being set. It seems harder now than it was in 3.x but that's not the first time I've had that thought since working with 4.x. Thanks again for your answer.

12 Sep 2011, 1:23 AM
I think using Firebug or equivalent is still the right technique. I originally tried to do it using the Chrome equivalent but it was getting itself a bit confused about precedence and lying to me about which styles were winning. Must say I hadn't seen that before. I actually found Firebug to be pretty accurate on this occasion. I didn't much like the selector I came up with for that second one, wanted something that looked more like the first.

Incidentally, I don't know if you've looked into the theming tools that come with the Sencha SDK but there's some really neat stuff in there.