How to create my own theme for HTML user dialogs?

jQuery offers a convenient and nice tool called ThemeRoller to create themes for JSF. Go there and create your own theme. When you are done, download the theme and unpack the zip file. You have to perform some manual changes, before you can use the theme:

• Please navigate to the directory css/NameOfYourTheme.
• Delete the file jquery-ui-1.9.2.custom.min.css.
• Rename the file jquery-ui-1.9.2.custom.css into theme.css.
• Open the just renamed file theme.css and adapt the URL to images from url(images/myPicture.png) into this pattern url("#{resource['NameOfYourTheme:images/myPicture.png']}").
• Create the folder structure META-INF/resources/NameOfYourTheme and copy theme.css and the images folder in there
• Zip the folder and rename the zip file into NameOfYourTheme.jar
• Add the theme to Ivy. Please read the chapter User Dialogs/Html Dialogs/Themes in the Designer guide for how to install a theme into Xpert.ivy.

Note: This question and answer was originally posted by Heinrich Spreiter on his Xpert.ivy Hacker blog. Many thanks to Henry for his enthusiastic work.