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