Friday, 28 February 2014

ZK 7 Group Box CSS

ZK Version : ZK 7

image
groupboxexample.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<style src="/css/style.css" />
<style src="/css/greentheme.css" />
<window title="Group Box CSS Example" border="normal" width="50%">
<separator></separator>
<separator></separator>
<separator></separator>
<separator></separator>
<separator></separator>
<separator></separator>
<groupbox mold="3d" closable="false"
sclass="grpboxSectionBar">
<caption label="General information" />
<label value="You are using: ${desktop.webApp.version}" />
</groupbox>
<separator></separator>
<separator></separator>
<separator></separator>
<separator></separator>
<separator></separator>
<separator></separator>
<groupbox mold="3d" closable="false">
<caption label="Another group box without sclass" />
<label value="You are using: ${desktop.webApp.version}" />
</groupbox>
</window>
</zk>



CSS – Style


.grpboxSectionBar.z-groupbox-3d>.z-groupbox-header {
background: none;
border: 0 none;
font-weight: bold;
height: auto;
min-height: 32px;
padding: 0px 0px;
font-size: 12px;
font-weight: bold;
color: white;
min-height: 25px;
}

.grpboxSectionBar.z-groupbox-3d > .z-groupbox-header .z-caption-content {
line-height: 16px;
padding: 4px 5px;
}

CSS – greentheme.css



.grpboxSectionBar.z-groupbox-3d>.z-groupbox-header {
background: transparent repeat-x 0 0;
background: #006466; /* Old browsers */
background-image: -ms-linear-gradient(top, #00A9A7 0%, #006466 100%);
/* IE10+ */
background-image: -moz-linear-gradient(top, #00A9A7 0%, #006466 100%);
/* Firefox 3.6+ */
background-image: -o-linear-gradient(top, #00A9A7 0%, #006466 100%);
/* Opera 11.10+ */
background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #00A9A7),
color-stop(100%,, #006466)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #00A9A7 0%, #006466 100%);
/* Chrome10+,Safari5.1+ */
background-image: linear-gradient(to bottom, #00A9A7 0%, #006466 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#00A9A7', endColorstr='#006466',
GradientType=0); /* IE6-9 */
}


CSS – graytheme.css

@CHARSET "ISO-8859-1";

.grpboxSectionBar.z-groupbox-3d>.z-groupbox-header {
background-image: none;
background: transparent repeat-x 0 0;
background: #6F8992; /* Old browsers */
background-image: -ms-linear-gradient(top, #6F8992 0%, #6F8992 100%);
/* IE10+ */
background-image: -moz-linear-gradient(top, #6F8992 0%, #6F8992 100%);
/* Firefox 3.6+ */
background-image: -o-linear-gradient(top, #6F8992 0%, #6F8992 100%);
/* Opera 11.10+ */
background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #6F8992),
color-stop(100%,, #6F8992)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #6F8992 0%, #6F8992 100%);
/* Chrome10+,Safari5.1+ */
background-image: linear-gradient(to bottom, #6F8992 0%, #6F8992 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#6F8992', endColorstr='#6F8992',
GradientType=0); /* IE6-9 */
}


CSS – bluetheme.css

@CHARSET "ISO-8859-1";

.grpboxSectionBar.z-groupbox-3d>.z-groupbox-header {
/* fallback */
background-color: #1a82f7;
background: url(images/linear_bg_2.png);
background-repeat: repeat-x;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7),
to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #2F2727, #1a82f7);
/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #2F2727, #1a82f7);
}




Output

image


image

image

2 comments:

  1. Hello Senthil, Can you give me Jar required for gritter notification ?
    Thanks, Bhushan.

    ReplyDelete

Passing Parameter between two files using MVVM

This examples shows how to pass parameter between two zul screens. In this example, we are passing some parameters from the parent vm to...