# Customize Look and Feel
## Components
### Listcell

The default style for a listcell is as follow
Thus, to customize the look and feel with a class, you have to specify as follows
Then, you can specify the sclass in your ZUML page.

### Create Custom Components

Rather than just hacking the .dsp files for the built-in components you can create new custom components that display themselves anyway that you want. See the DevGuide PDF on the zkoss.org site for instructions. Note that the "Dojo Fish Eye" example on the demo page and with the code at zkforge is an example of creating a custom component.

### How do I change the "Processing.." Spinner and other system messages for something nicer?

Here is the zk-progress-prompt.js file that that draws a custom spinner xhtml
Hers is a zk-zscript-error-message.js file for when an exception is thrown in a zscript. N.B. The error message is a joke and your users might not find it funny so you need to edit this one...
Here is the zk-ajax-error-message.js file that that draws a custom box when the AJAX connection fails (such as the server goes down or the users network connection gets dropped):
Here is some zul that will show this spinner when you click the 'Long Processing!' button and will show the zscript exception message when you click the 'Throws Exception!' button. N.B. You will only see the AJAX exception message if you stop your server or disconnect your PC from the network then press either button.

### How to customize my image for ZK Button in ZK 3.5.x version

For example,

## CSS
### Use CSS "id" Selector To Style A Specified Window Component

Window is a sophisticated component in ZK. To change its style, sometimes a developer must override the style definition in the default CSS file to make it work. For example, if we want to change the Window's title style. The following code will not work, because the style attribute applies to the window itself, not the title.
The correct way to change the style of the window's title is as follows:
The style component will generate the CSS selector <style> .title td {...} </style> into the final html page and interpreted by the browser to use this new style.
Great, now we change the window's title style without problem... Wait a minute, if I have more than one window on the same page, all windows' title will be changed to the new style because it is defined as a CSS "class" selector. What if I just want to change one window's title and leave others as is? You have to define a CSS "id" selector. The question is, as we all know that the finally generated html tag id is the uuid generated by the ZK engine automatically. We don't know the uuid value beforehand and it is immutable after it is generated. How do I difine an CSS "id" selector? Don't worry, use the EL expression to do the job for you. The following code would change win1's style only, the win2 is leave as is:
Please note that this does not work in IE6. Try instead of #${win1.uuid} #\${win1.uuid} This works in IE6 and FF1

### Edit The .dsp Files For The Components

You can use winzip or jar.exe to extract the zul jar file in the WEB-INF/lib folder of your web application into your WEB-INF/classes folder. Then remove the jar file from the lib so that your servlet container picks up the all of the class files, images and dsp files from the file system. Search for the dsp files and images and you will find the gif images that zk uses as well as a set of dsp files who's names match the xul elements such as /web/zul/html/tabbox.dsp. If you open this file you will see that it is the template used to convert the ZK Component into html for the browser and it outputs html table markup. You can edit the html markup in these files and bounce the server or reload the application to see the effect.

### CSS Font in Grid, Tree, and Listbox

3.0RC
* Here is a header CSS.
* Here is a body CSS.
3.0
* Here is a header CSS.
* Here is a body CSS.
To modify tree icon by style
Here is a corresponding image: https://archive.is/20130707075935/img512.imageshack.us/img512/8242/treeicondesut8.png
Here are the css classes:

### CSS in Window

* Left
* Middle
* Right
EX: