Can any one provide me some heads up or some information in customizing the themes in GXT 3.0.

Customizing means how can we apply only colors to the component background instead of maintaining static images with different states(Select state, over state, Inactive state etc.,)

I tried with extracting the jar file and make my changes to various styles and and adding those files back to the jar and importing jar to my application and checking whether I made appropriate change or not. This is taking a hell lot of time as it is involving lot of permutations to be executed.

And one more important thing is that their are static images that are used as borders(top, left, right and bottom) so if I change the background color of a component it will applied only to the background of of the text that I'm displaying no to the entire background of the component because of above statement(maintaining static images). In case of a text button it is even more worse as their is some layer or static images being displayed behind the text on the button, If I apply background-color property it applies behind that layer(I can see the color that I had applied from behind the rounded corners of the button I had created).

Following a simple issue what I'm trying to explain above. Attachment 42903
Beside the text(Dashboard) in the tab panel are the static images that are applied using CSS by the framework.

The short version is that if you want to use the GXT TextButton class, and style it to your own specific needs, then you need to completely style it. One option is to start with the built in themeing, and change in one piece at a time. Another is to use one of the GWT button classes, and have a simpler dom to work with, and not worry about cross browser differences.

Longer answer, assuming you stick with GXT buttons:
At present, the button is styled by 9 images, in the typical 9-box pattern:

This enables each corner to be rounded, even for browsers that don't support rounded corners. Likewise the middle sections might have gradients to let them be drawn differently for browsers that don't support that feature (or are slow to draw them).

Nine images for each button. Now multiple that by three possible states that a button can be in - normal, over (or focused), and active (or toggled) gives us 27 different images that need to be customized.

If all browsers supported alpha transparency, we could make these images transparent and let background-color set a color that could bleed through - this wouldn't be quite perfect (rounded corners again), but we could get close.

We're working on a theme builder that will allow more control over styles and will generate images for the browsers that need it, and possibly use CSS3 for for those that can support it.

In the mean time, as I said, if you want the same button api/lookandfeel/cross browser consistency that gxt's TextButton offers, making the 9-box images is really the way to do it. Editing those appearances gives you as much control as possible as to how any given widget or cell should be rendered. You don't need to use images at all, and can even use your own html structure, such as just drawing a <button> and giving it some css styling.

graphical design

Hello Colin,

Styling is getting more and more important for our customers... What are your recommendations for graphic adjustments regarding to GXT3 programs? We want to outsource this to graphical designers, who want to know the possibilities and procedures for this.