Improving component layout in your ZK Liferay Portlet

Improving component layout using CSS in ZK Liferay Portlet

Hello Friends,

After we have complete the first step of ZK Liferay Integration Let's discuss about the proper styling of the various ZK controls in Liferay Portlet.

When you create your first Liferay ZK Portlet as describe in my pervious blog you may face some styling issues in component layouts.

You just can place below css code in your portlet's main.css file. Your most of the issues related to the styles will get resolved.



You can override the existing style of ZK Components within your portlet by giving your portlet's css class as a parent class.

For example here our Liferay ZK Portlet project name is zk-components-portlet so in our case our portlet specific parent css class name will be .zk-components-portlet.

Open the file docroot\css\main.css

Paste below CSS code in main.css file

.zk-components-portlet div.z-treefooter-cnt,
.zk-components-portlet div.z-treecell-cnt,
.zk-components-portlet div.z-treecol-cnt {
 padding: 2px 5px;
}

.zk-components-portlet div.z-treecol-cnt,
.zk-components-portlet div.z-tree-header 
.zk-components-portlet div.z-auxheader-cnt {
 padding: 0px 5px;
}

.zk-components-portlet .z-combobox-inp, 
.zk-components-portlet .z-bandbox-inp, 
.zk-components-portlet .z-datebox-inp, 
.zk-components-portlet .z-timebox-inp, 
.zk-components-portlet .z-spinner-inp, 
.zk-components-portlet .z-doublespinner-inp {
 padding: 2px;
}

.zk-components-portlet .z-textbox,
.zk-components-portlet .z-decimalbox, 
.zk-components-portlet .z-intbox, 
.zk-components-portlet .z-longbox, 
.zk-components-portlet .z-doublebox {
 padding: 2px;
}

.zk-components-portlet .z-combobox-rounded-inp, 
.zk-components-portlet .z-bandbox-rounded-inp, 
.zk-components-portlet .z-datebox-rounded-inp, 
.zk-components-portlet .z-timebox-rounded-inp, 
.zk-components-portlet .z-spinner-rounded-inp, 
.zk-components-portlet .z-doublespinner-rounded-inp {
    border: 0 none;
    padding: 5px;
}

.zk-components-portlet .z-button .z-button-tl,
.zk-components-portlet .z-button .z-button-cl,
.zk-components-portlet .z-button .z-button-tr,
.zk-components-portlet .z-button .z-button-cr {
 font-size: 0;
}

.zk-components-portlet tr.z-row td.z-row-inner, 
.zk-components-portlet tr.z-row .z-cell {
    padding: 0 4px 0 6px;
}

.zk-components-portlet div.z-paging-os-cnt-seld-m, 
.zk-components-portlet div.z-paging-os-cnt-m {
    height: 20px;
}

.zk-components-portlet .z-paging-inp, 
.zk-components-portlet .z-paging input.z-paging-inp {
    height: 12px;
}

For rendering rounded mold of the various ZK controls like Datebox, Bandbox, Combobox etc, you need to do some customization. You need to extract necessary image files from the ZK's theme jar

Here in our example we have used ZK's sapphire theme so you need to extract sapphire.jar in your local file system.

Now you navigate to the \sapphire\web\sapphire\zul\img\button directory. In this dir you can find below four png files.

• combobox-rounded.png
• bandbox-rounded.png
• timebox-rounded.png
• datebox-rounded.png

You copy these files in your project's /docroot/images directory.

Then append below css code to your main.css file.

.zk-components-portlet .z-combobox-rounded-inp {
    background-image: url("../images/combobox-rounded.png");
}

.zk-components-portlet .z-bandbox-rounded-inp {
    background-image: url("../images/bandbox-rounded.png");
}

.zk-components-portlet .z-timebox-rounded-inp, 
.zk-components-portlet .z-spinner-rounded-inp, 
.zk-components-portlet .z-doublespinner-rounded-inp {
    background-image: url("../images/timebox-rounded.png");
}

.zk-components-portlet .z-datebox-rounded-inp {
    background-image: url("../images/datebox-rounded.png");
}

That's It.. Now your ZK Portlet will also support rounded molds for Datebox, Bandbox, Combobox and Timebox. :)