Button sprite template

[deanna]

Is the anywhere floating around (searches don't show one), a template layout for the new button format? Save a lot of time in reverse engineering all the css to find out what areas are used for which section of the button. Even a text description of the 27 areas would help (I think 27, 9 divs x 3 states)

[wallacer]

I'd also like the button template format

[DamianHartin]

I assume we're talking EXTJS 3 here? and yes, I'd like some template/pointers/help in changing the theme of the new button sprites.

Has anyone themed the new buttons yet? would love to know how you did so.

Thanks,
Damian

[aw1zard2]

Button CSS from Ext 3.1

.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{
    background-image:url(../images/default/button/btn.gif);
}

.x-btn-tl{
    width:3px;
    height:3px;
    background:no-repeat 0 0;
}
.x-btn-tr{
    width:3px;
    height:3px;
    background:no-repeat -3px 0;
}
.x-btn-tc{
    height:3px;
    background:repeat-x 0 -6px;
}

.x-btn-ml{
    width:3px;
    background:no-repeat 0 -24px;
}
.x-btn-mr{
    width:3px;
    background:no-repeat -3px -24px;
}

.x-btn-mc{
    background:repeat-x 0 -1096px;
    vertical-align: middle;
    text-align:center;
    padding:0 5px;
    cursor:pointer;
    white-space:nowrap;
}

/* Fixes an issue with the button height */
.ext-strict .ext-ie6 .x-btn-mc, .ext-strict .ext-ie7 .x-btn-mc {
    height: 100%;
}

.x-btn-bl{
    width:3px;
    height:3px;
    background:no-repeat 0 -3px;
}

.x-btn-br{
    width:3px;
    height:3px;
    background:no-repeat -3px -3px;
}

.x-btn-bc{
    height:3px;
    background:repeat-x 0 -15px;
}

.x-btn-over .x-btn-tl{
    background-position: -6px 0;
}

.x-btn-over .x-btn-tr{
    background-position: -9px 0;
}

.x-btn-over .x-btn-tc{
    background-position: 0 -9px;
}

.x-btn-over .x-btn-ml{
    background-position: -6px -24px;
}

.x-btn-over .x-btn-mr{
    background-position: -9px -24px;
}

.x-btn-over .x-btn-mc{
    background-position: 0 -2168px;
}

.x-btn-over .x-btn-bl{
    background-position: -6px -3px;
}

.x-btn-over .x-btn-br{
    background-position: -9px -3px;
}

.x-btn-over .x-btn-bc{
    background-position: 0 -18px;
}

I have done custom buttons but for what i'm using it was a very basic sprite for touchscreen like square buttons.
Am making a new theme for the project I am working on and hope to have it free to use for this year. Depends on the bosses lol.

[andreiastra]

The image the button uses is ../images/default/button/btn.gif, however is used to be btn-sprite.gif.

I do have the sprite image for my theme.

How do I create/generate btn.gif from btn-sprite.gif?

Thank you,

Andrei