ZK Style Designer helps you customize the ZUML component's CSS Style easily, to use ZK Style Editor, you have to make a new CSS Style Sheet file (*.css), then open it with ZK Style Editor by right click the .css file and select [Open With]/[ZK Style Editor] in context menu.

(Note: ZK Style Editor is for use with ZK 3.5.2 and above only.)

On the top toolbar in ZK Style Designer, the leftmost button is to create “rule” for certain ZUML component, rules are the special CSS class that you can use in ZK to specify the sclass of a component.

You have to specify the Style Type that you want to customize in this rule. The Style Type is the ZUML component name and append it with a "-" and it's mold name.

After create the rule, you can select the rule, the right panel will show the options that you can do customization on this component.

With the help of ZUL Visual Editor, you can instantly see the customized result in a concise demo presentation of the component that this rule will apply to.

The created rules can be managed via the top toolbar in ZK Style Designer, from left to right are: create a rule, rename a rule, rise selected rule up 1 level, lower selected rule down 1 level, delete selected rule, force content in GUI interface of ZK Style Designer to write to CSS file, open ZUL Visual Editor.

The right bottom tab "source" of ZK Style Editor provides a source view of the real CSS code in this CSS Style Sheet file. You can do minor customization here.

(Note: don't remove the comment that ZK Style Editor generated, or the ZK Style Designer will treat it as user's special custom rule in the CSS Style Sheet file, and show it as custom rule in GUI Interface of ZK Style Designer, in that case you will not be able to use the GUI Interface of ZK Style Editor to customize the rule that you remove the comment.)