福网

ZK AJAX 学习笔记第九天 利用css来更改控件颜色

ZK AJAX 学习笔记
—-Run Java and JSP on ZK

更改zk控件的颜色一直是令我头疼的问题,后来通过修改css文件缓和了一些,不过这个方法是把控件的默认颜色修改了。

打开前面的zk_jsp_java工程,将路径下的 zul.jar中的web文件夹解压,放到工程的src下,也就是引入路径,同时将zul.jar中的web文件夹删除。

如下图:

normie.css.dsp,IE默认的css

normmoz.css.dsp firefox默认的css

其他的我没改过。

normmoz.css.dsp的部分内容如下:

 

<%-- ZK tree, listbox, grid --%>
div.listbox, div.tree, div.grid, div.grid-no-striped { <%-- depends sclass. --%>
	background: threedface; border: 1px solid #7F9DB9;
}
div.tree-head, div.listbox-head, div.grid-head { <%-- always used. --%>
	background: threedface; border: 0; overflow: hidden; width: 100%;
}
div.listbox-paging th, div.grid-paging th {
	background: threedface;
}
div.tree-head th, div.listbox-head th, div.grid-head th, div.listbox-paging th, div.grid-paging th {
	overflow: hidden; border: 1px solid;
	border-color: threedhighlight threedshadow threedshadow threedhighlight;
	white-space: nowrap; padding: 2px;
	font-size: small; font-weight: normal;
}
div.listbox-head th.sort, div.grid-head th.sort, div.listbox-paging th.sort, div.grid-paging th.sort {
	cursor: pointer; padding-right: 9px;
	background-image: url(${c:encodeURL('~./zul/img/sort/hint.png')});
	background-position: right;
	background-repeat: no-repeat;
}
div.listbox-head th.sort-asc, div.grid-head th.sort-asc, div.listbox-paging th.sort-asc, div.grid-paging th.sort-asc {
	cursor: pointer; padding-right: 9px;
	background-image: url(${c:encodeURL('~./zul/img/sort/asc.png')});
	background-position: right;
	background-repeat: no-repeat;
}
div.listbox-head th.sort-dsc, div.grid-head th.sort-dsc, div.listbox-paging th.sort-dsc, div.grid-paging th.sort-dsc {
	cursor: pointer; padding-right: 9px;
	background-image: url(${c:encodeURL('~./zul/img/sort/dsc.png')});
	background-position: right;
	background-repeat: no-repeat;
}

div.tree-body, div.listbox-body, div.grid-body, div.listbox-paging, div.grid-paging { <%-- always used. --%>
	background: window; border: 0; overflow: auto; width: 100%;
}
div.listbox-paging, div.grid-paging {
	height: 100%;
}
div.listbox-pgi, div.grid-pgi {
	border-top: 1px solid #AAB;
}
div.tree-body td, div.listbox-body td, div.listbox-paging td {
	cursor: pointer; padding: 0 2px;
	font-size: small; font-weight: normal;
}

div.listbox-foot, tbody.listbox-foot, div.grid-foot, tbody.grid-foot, div.tree-foot, tbody.tree-foot { <%-- always used --%>
	background: threedface; border-top: 1px solid threedshadow;
}

tr.item, tr.item a, tr.item a:visited {
	font-size: small; font-weight: normal; color: black;
	text-decoration: none;
}
tr.item a:hover {
	text-decoration: underline;
}
tr.itemsel, tr.itemsel a, tr.itemsel a:visited {
	font-size: small; font-weight: normal;
	background: highlight; color: highlighttext;
	text-decoration: none;
}
tr.itemsel a:hover {
	text-decoration: underline;
}

tr.grid td.gc, tr.grid-od td.gc, tr.grid-no-striped td.gc, tr.grid-no-striped-od td.gc {
	background: #FFF; border-bottom: none; border-left: 1px solid #FFF;
	border-right: 1px solid #CCC; border-top: 1px solid #DDD; padding: 2px;
	font-size: small; font-weight: normal;
}
tr.grid-od td.gc {
	background: #E8EFEA;
}

 

修改对应内容即可,例如background,字体大小等,如果修改IE外观,则修改IE的css文件。

有的控件,如window的caption的蓝色,那是图片,在img/wnd下,如下图:

如果要改变颜色,则要修改图片了。

发表评论

电子邮件地址不会被公开。

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>