Styling in Smart GWT

[curiousgally]

Isomorphic,

I'm trying to see how we can achieve custom styling as per our company to SmartGWT components. This is critical for and approval to purchase SmartGWT.

Just started off with the IButton component. I had gone through the QuickStartGuide, created a seperate theme and played around modifying the css files.

I'm trying to achieve what is in the attached image.
The height of the Button image was always 22. Then I changed load_skin.js to change this behaviour but it doesn't help. However if I do a setHeight on IButton in java it renders the height specified. I cannot take this approach because we want to have custom styling which can be used across and would want to avoid such function calls in java.

Can you suggest me the next steps in achieving this. Also suggest what could be the best possible way to achieve the styles in the attached document.

Thanks.

[curiousgally]

Adjusting the capsizes and other things helped.
Here button image is comprised of 3 pieces. So I had to replace the button_start.png, button_end.png, button_stretch.png in the images/button/ folder.

But if you look at the attached image i need to change these images based on the type of button i'm creating. So the approach above doesn't work. I should be able to specify custom image instead of button_start.png etc.

Any pointers on how to achieve this.
Also any thoughts on achieving the padding specified in the attached image.

Thanks.

[Isomorphic]

Use setSrc() to change the names of the media used, eg, setSrc("[SKIN]/button/button2.png") would cause requests for button2_start.png, button2_stretch.png et al. Padding can be set with setLabel*Pad() APIs. Remember to look at superclass APIs.