I'm going to post a detailed tutorial on how to use a custom theme, but basically it's just a matter of including the .css for the new theme after the default .css file has been added by the controls.
The controls automatically add their required JavaScript and CSS into the Page <head>. By default they will be added as the last items in the head. You can control the position of the scripts/css in the head by adding a <cool:ScriptContainer> control into the <head> of your Page.</p>
The link to the custom .css file must be added after the ScriptContainer.</p>
Example</p>
<head runat="server">
*** <title>Untitled Page</title>
*** <ext:ScriptContainer ID="ScriptContainer1" runat="server" />
*** <link href="ExtJS/resources/css/xtheme-green.css" rel="stylesheet" type="text/css" />
</head>
</p>
The path to the custom xtheme .css and related images folder should be to a location within the web application. The path above (ExtJS/resources/) is*a typical location to store the xtheme.</p>
Example</p>
ExtJS/resources/css
ExtJS/resources/images/[theme]
</p>
*</p>
Hope this helps.</p>
