Create your own Nifty Panel Styles - it's easy! :D

To customize and extend the default nifty styles is easy. In this example you add your own panel style :)

Default Styles</strong>
Nifty default styles need to be included using the tag:</p>

 </pre>

To actual use this Style for a panel you use the "style" Attribute in the
 tag:</p>
 </pre>

When you're using the two (!) lines you'll get the well known default "yellow, red, black" colored panel:</p>
[caption id="" align="aligncenter" width="256" caption="default panel style"]<img title="default panel style" src="http://nifty-gui.lessvoid.com/images/custom-panels-default-panel-thumb.png" alt="default panel style" width="256" height="161" /></a>[/caption]</p>


Note</strong>

The "nifty-default-styles.xml" was until Version 0.0.4 a part of "nifty.jar". Starting with Version 0.0.5 the default styles will be a part of the seperate "nifty-default-styles.jar".</p>
The Default "nifty-panel" Style</strong>

Here is the complete style definition for the "nifty-panel" style:</p>


</pre>

Not really complicated, eh? :) Besides the funny numbers of course, but we get to those in a minute :)</p>
The "nifty-panel" Style only consists of a background image named "dialog.png". This image is a part of "nifty-default-styles.jar" and looks like this:
[caption id="" align="aligncenter" width="96" caption="dialog.png"]<img title="dialog.png" src="http://nifty-gui.lessvoid.com/images/dialog.png" alt="dialog" width="96" height="232" /></a>[/caption]</p>
If you would just use a fixed sized image as the background for your panel you can skip the "imageMode" attribute. But if you need to resize your panel later the default behavior would stretch the image. For some images that could work but when you use rounded edges you would get bad streching like in this example:

[caption id="" align="aligncenter" width="48" caption="bad stretching"]<img title="bad stretching" src="http://nifty-gui.lessvoid.com/images/dialog-stretched.png" alt="bad stretching" width="48" height="110" />[/caption]
So to kinda work around this limitation you can add the "imageMode" attribute to give Nifty a hint where stretching is possible and where the proportions need to be kept. The "imageMode" Attribute will take 12 arguments:

w1,w2,w3,h1,w4,w5,w6,h2,w7,w8,w9,h3</code>

where "w" means "width" and "h" means "height". Here is an example:</p>
[caption id="" align="aligncenter" width="96" caption="stretching"]<img title="stretching" src="http://nifty-gui.lessvoid.com/images/dialog-sizeable.png" alt="stretching" width="96" height="232" />[/caption]

Nifty will stretch only the subimages w2, w5 and w8 horizontally when your panel needs to be stretched horizontal and it will change the height of parts w4, w5 and w6 when vertical stretching occurs. All other subimages will stay unchanged and this way we can keep the round edges.
Finally your own Style</strong>

I've made a half transparent Image:</p>
[caption id="" align="aligncenter" width="128" caption="custom panel picture"]<img title="custom panel picture" src="http://nifty-gui.lessvoid.com/images/custom-panel.png" alt="custom panel picture" width="128" height="128" />[/caption]

Making this into a custom style is pretty easy. You just need to add the image to your resources so that Nifty can find it and you add this to your xml:
</p>
--></pre>

And thats it :)
Now you just use this Style in your panel and you get a resizable custom panel (Here we have two overlapping panels to show of the transparency too):
[caption id="" align="aligncenter" width="256" caption="custom panel picture"]<img title="custom panel picture" src="http://nifty-gui.lessvoid.com/images/custom-panels-changed-panel-thumb.png" alt="custom panel picture" width="256" height="161" /></a>[/caption]</p>
Have Fun :D