View Full Version : Creating a new Ext Button Image

18 May 2010, 11:38 AM
If I wanted to override a button and create my own button for the gray theme, which would have a slightly different background, pure white on the hover over, instead of gray, what is the best way to go about doing that?

I've looked at the btn.gif within the gray theme and I just don't know how to make heads or tails of what part of that image effects what button. Where could I get the skinny on how to do this?

20 May 2010, 10:11 AM
the best way is to reverse engineer the CSS via firebug and modify accordingly

20 May 2010, 10:20 AM
Thanks J. I did spend some time fiddling with it, however, I just can't seem to decipher what is going on in the btn.gif. It's like an enigma wrapped in a riddle ;)


20 May 2010, 10:26 AM
Are you familiar w/ how CSS sprites are used?

20 May 2010, 10:28 AM
Novice. Is there anywhere you can point me to hone in my skills. I'm good on the CSS part, it's just the sprites that I need help on.

20 May 2010, 10:34 AM
CSS Sprites are something that is standard. There are lots of resources on the web.

20 May 2010, 10:43 AM
Alright, I've read about them: http://css-tricks.com/css-sprites/. Now I'm just curious how I would modify the the sprite within the /gray/button/btn.gif? Is there a tool for Ext images? Or someone who has a tutorial specific to these buttons?

20 May 2010, 10:55 AM
the css is easy to read:

.x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc{

t = top
m = middle
b = bottom
l = left
c = center
r = right


tl = top left

bc = bottom center

Here is a demo of the HTML layout: http://tdg-i.com/img/screencasts/2010-05-20_1454.swf

20 May 2010, 10:58 AM
A quick dissection of the sprite:
There is *more* towards the bottom of the image though, which is *not shown*


20 May 2010, 11:23 AM
Pure gold! Once again you've come through in a clutch. If you ever make it out to Austin TX, let me know. I owe you a beer.

20 May 2010, 12:39 PM
No problem. :). Glad to share knowledge.