Toolbar button style

[exo]

Myself I find the look and feel of the toolbar buttons in Exts default theme a bit lacking. From a users' point of view I don't feel it's immediately obvious for a user that the button can be clicked upon, especially when the button is just text and no icon.

I found a suggestion by Animal here but that still didn't satisfy me. So for everyone (anyone) who feels the same way I propose a different solution, make the buttons look like the way buttons look in Ext outside of a toolbar. So instead of:
old.jpg

They could look like:
new.jpg


In order to do this use the following CSS to make all toolbar buttons this way:

/* This gives toolbar buttons the regular button style */
.x-toolbar .x-btn-left { background: url(resources/images/default/button/btn-sprite.gif) no-repeat 0px 0px;}
.x-toolbar .x-btn-center { background: url(resources/images/default/button/btn-sprite.gif) repeat-x 0px -42px; text-align: center;}
.x-toolbar .x-btn-right { background: url(resources/images/default/button/btn-sprite.gif) no-repeat 0px -21px;}

.x-toolbar .x-btn-over .x-btn-left{ background: url(resources/images/default/button/btn-sprite.gif) no-repeat 0px -63px;}
.x-toolbar .x-btn-over .x-btn-center{ background: url(resources/images/default/button/btn-sprite.gif) repeat-x 0px -105px;}
.x-toolbar .x-btn-over .x-btn-right{ background: url(resources/images/default/button/btn-sprite.gif) no-repeat 0px -84px;}

.x-toolbar .x-btn-click .x-btn-center, .x-btn-menu-active .x-btn-center{ background-position:0 -126px;    }
/* end block */ 

OR, if you only want to apply the style on a few buttons, use 'cls: x-form-toolbar-standardButton' and use the following CSS

/* This gives toolbar buttons with cls: x-form-toolbar-standardButton the regular button style */
.x-toolbar .x-form-toolbar-standardButton .x-btn-left { background: url(resources/images/default/button/btn-sprite.gif) no-repeat 0px 0px;}
.x-toolbar .x-form-toolbar-standardButton .x-btn-center { background: url(resources/images/default/button/btn-sprite.gif) repeat-x 0px -42px; text-align: center;}
.x-toolbar .x-form-toolbar-standardButton .x-btn-right { background: url(resources/images/default/button/btn-sprite.gif) no-repeat 0px -21px;}

.x-toolbar .x-form-toolbar-standardButton.x-btn-over .x-btn-left{ background: url(resources/images/default/button/btn-sprite.gif) no-repeat 0px -63px;}
.x-toolbar .x-form-toolbar-standardButton.x-btn-over .x-btn-center{ background: url(resources/images/default/button/btn-sprite.gif) repeat-x 0px -105px;}
.x-toolbar .x-form-toolbar-standardButton.x-btn-over .x-btn-right{ background: url(resources/images/default/button/btn-sprite.gif) no-repeat 0px -84px;}

.x-toolbar .x-form-toolbar-standardButton.x-btn-click .x-btn-center, .x-btn-menu-active .x-btn-center{ background-position:0 -126px;    }
/* end block */ 

Maybe it can help someone .

[drew]

I don't think your attachments are rending properly

they seem fine now.

...I do like the idea.

[tof]

Sometime I need it, too; then I only do :

Ext.Toolbar.prototype.autoCreate.cls = "x-mytoolbar"; 

(Not perfect, not better, just another method, HTH)

[Scorpie]

Thanks!

[fzammetti]

Unless I'm mistaken, this doesn't work for Ext JS 2.x... does anyone by chance have this updated for 2.x? I'm being asked to make our toolbar buttons "stand out" more, and this would be the perfect solution.

[zombeerose]

Here is an update for Ext 3.0 that applies to all toolbar buttons

.x-toolbar .x-btn-tl { background-position: 0 0; }
.x-toolbar .x-btn-tr { background-position: -3px 0; }
.x-toolbar .x-btn-tc { background-position: 0 -6px; }
.x-toolbar .x-btn-ml { background-position: 0 -24px; }
.x-toolbar .x-btn-mr { background-position: -3px -24px; } 
.x-toolbar .x-btn-mc { background-position: 0 -1096px; }
.x-toolbar .x-btn-bl { background-position: 0 -3px; }
.x-toolbar .x-btn-br { background-position: -3px -3px; }
.x-toolbar .x-btn-bc { background-position: 0 -15px; }

[demongloom]

My toolbar buttons style. I slightly modified original background to make regular button be more visible as button. Before (without light border) some users acts button as piece of text.

[zombeerose]

demongloom, would you please post what changes you made to achieve those effects?

Are they theme-compatible?

[demongloom]

I've modified original theme in toolbar.css

.x-toolbar .x-btn-left{
    background: url(../images/default/toolbar/tb-btn-normal.png) no-repeat 0 0px;
}
.x-toolbar .x-btn-right{
    background: url(../images/default/toolbar/tb-btn-normal.png) no-repeat 0 -21px;
    padding-right: 3px;
}
.x-toolbar .x-btn-center{
    background: url(../images/default/toolbar/tb-btn-normal.png) repeat-x 0 -42px;
    padding:0 0;
} 

http://img26.imageshack.us/img26/6233/tbbtnnormal.png


That's all

[xiexueze]

thanks for demongloom's image and css code
it works well in firefox,but in IE the png image render little ugly.