AW.UI.Button; Height

can you set a height of the button on AW.UI.Button?

Yes - in classic and flat skins.
No - in xp and aqua skins because it is linked to background image size (but you can make additional background images for each required size).

thanks. I've tried many settings. but only the width worked.
I'll try the image method.
thanks for the tip.

Okay, I have created button_small.png and button_smaller.png in both the aqua and XP skins.......

So now what CSS changes do I need to make in order for it to show up right?

In the aqua's css source (button.css) I see

.aw-ui-button {
    height: 23px!important;
    background: url(button.png) 100% 0px no-repeat;
    padding-right: 8px;
}

.aw-ie6 .aw-ui-button {
    background-attachment: fixed; /* ie right margin fix */
}

.aw-strict .aw-ui-button {
    height: 19px!important;
    padding: 0px 8px 4px 0px;
}

.aw-ui-button .aw-item-box {
    padding: 0px;
    text-indent: 8px;
    background: url(button.png) 0px -50px no-repeat;
}

.aw-strict .aw-ui-button .aw-item-box {
    margin:  0px 0px -4px 0px;
    padding: 0px 0px 4px 0px;
}

.aw-mouseover-button {
    background-position: 100% -100px;
}

.aw-mouseover-button .aw-item-box {
    background-position: 0px -150px;
}

.aw-mousedown-button {
    background-position: 100% -200px;
}

.aw-mousedown-button .aw-item-box {
    background-position: 0px -250px;
}

Now I know that the mousedown and mouseover style I need to just make sure the offset reflects the new heights of my buttons ( I just resized... well... squished the buttons.png from 500px to 400px so the buttons are shorter... thus my offsets are not 50px anymore, they are 40)

BUT... what about the aw-strict vs. aw-ui-button?

Which do I change? And what is aw-strict!?

Wow... I learned alot today....

first off, for anyone who doesn't know, aw-strict is applied to all controls if your DOCTYPE is a strict type... whether it works or not... don't know (several posts already on that)

Secondly, back to my own question... making smaller buttons.

Here it is:

1) In either aqua or XP skin (others don't matter) create a copy of buttons.png to buttons_small.png.

2) Edit buttons_small.png by shrinking the height of each sprite by a few pixels... for instance I took each sprite (a sprite is any individual contextual part of an image) and shrank it by 3 pixels, BUT I made sure that the sprite still started at the original starting point. This starting point, defined in the AW button.css is 50 pixels between the start of each sprite. REPEAT this process (from step 1) with even more shrinkage to create button_smaller.png if you want two small-levels of button sizes.

NOTE: Do not adjust the width. Leave the width alone, just squeeze the height of the image.

3) Copy the following CSS snippet into a NEW CSS page LOCATED IN THE STYLES/AQUA OR STYLES/XP DIRECTORY. This is important because the url() part of the CSS is looking for a path-dependent image file....

4) if you create an UI.Button object (var obj = new AW.UI.Button) then, simply add obj.setClass("ui","button-small") to make it a small button. Or make that obj.setClass("ui","button-smaller") to make it even smaller.

5) put a stylesheet link next to your aqua/aw.css line in your html page to add this stylesheet.

6) Lastly, tweak your copy of the CSS to match your image files. In other words, I set my new height for button-small to 18px, but that's because i shrank each sprite by 3px and removed a blank px line from top and bottom, thus 5px were taken away from the original 23px sprite... and as we know 23-5 = 18. So if you shrink yours by 6, then 23-6=17, you'd set your height in your CSS file to 17px!important. DON'T forget the <exclamation>important!

OK, so now the CSS:

.aw-ui-button-small {
        height: 18px!important;
        background: url(button_small.png) 100% 0px no-repeat;
        padding-right: 8px;
        text-align: center;
    }

    .aw-ie6 .aw-ui-button-small {
        background-attachment: fixed; /* ie right margin fix */
    }

    .aw-strict .aw-ui-button-small {
        height: 16px!important;
        padding: 0px 8px 4px 0px;
    }

    .aw-ui-button-small .aw-item-box{
        text-indent: 8px;
        font-size: 10px;
        background: url(button_small.png) 0px -50px no-repeat;
    }

    .aw-strict .aw-ui-button-small .aw-item-box {
        margin:  0px 0px -4px 0px;
        padding: 0px 0px 4px 0px;
    }

    .aw-ui-button-smaller {
        height: 16px!important;
        background: url(button_smaller.png) 100% 0px no-repeat;
        padding-right: 8px;
        text-align: center;
    }

    .aw-ie6 .aw-ui-button-smaller {
        background-attachment: fixed; /* ie right margin fix */
    }

    .aw-strict .aw-ui-button-smaller {
        height: 14px!important;
        padding: 0px 8px 4px 0px;
    }

    .aw-ui-button-smaller .aw-item-box{
        text-indent: 8px;
        font-size: 9px;
        background: url(button_smaller.png) 0px -50px no-repeat;
    }

    .aw-strict .aw-ui-button-smaller .aw-item-box {
        margin:  0px 0px -4px 0px;
        padding: 0px 0px 4px 0px;
    }

        /*Now for some reason, we have to re-establish the mouseover and mousedown styles... even though they are exactly the same!*/

    .aw-mouseover-button {
        background-position: 100% -100px;
    }

    .aw-mouseover-button .aw-item-box {
        background-position: 0px -150px;
    }

    .aw-mousedown-button {
        background-position: 100% -200px;
    }

    .aw-mousedown-button .aw-item-box {
        background-position: 0px -250px;
    }

Hope this helps someone get a quicker result than I did! I spent a day learning about the class-structures of AW!!

Man! I have a lot of respect for Alex after seeing his code!

I would suggest adding another class instead of replacing .aw-ui-button. This way you don't have to repeat all .aw-ui-button rules because the new class rules will be applied 'on top' of the existing ones. Lets use, for example, .aw-button-small -

var obj = new AW.UI.Button;
obj.setClass("button", "small"); // adds .aw-button-small CSS class
obj.setControlText("Some text");
document.write(obj);

with these CSS rules -

.aw-button-small {
    height: 18px!important;
}

.aw-strict .aw-button-small { /* for strict doctypes */
    height: 14px!important;   /* 4px less */
}

.aw-button-small, .aw-button-small .aw-item-box {
    background-image: url(button_small.png);
}

Again, this assumes that the new image has the same sprite offsets as the original one (50px) and the new image is located in the same directory as the file with the new css rules.

(strict or 'standards-compliant' doctypes are supported starting with AW 2.0.1)

you the man