-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Thank for Luca Vidoni's contribution. Download five new ZK themes to refresh the layout of your Web application. They are green, gray, orange, red, yellow!
Could any one provide a small HowTo use the new ZK-Themes!?
I put the jar in the lib and added
<zk> <desktop-config> <disable-theme-uri>~./zul/css/norm*.css.dsp*</disable-theme-uri> <theme-uri>~./GreyTheme/img.css.dsp</theme-uri> </desktop-config> </zk>
to zk.xml... but nothing changed...
Thanks, Thomas
EDIT: after a second try it works as decribed above
hey all,
can someone send some screenshots of the new themes?
It could be easier as install by myself :P
Geramaya
Hi
You should not disable ~./zul/css/norm*.css.dsp* in the desktop config. Then the UI is not good.
In fact adding the theme jar to your WEB-INF/lib and restart the server will work.
So without adding a <theme-uri> for the GreyTheme in the zk.xml file my theme provider listing is as follows:
MyThemeProvider.java :> uri ~./zul/css/norm*.css.dsp*
MyThemeProvider.java :> uri ~./zkex/zul/css/zkex*.css.dsp*
MyThemeProvider.java :> uri ~./zkmax/zul/css/zkmax*.css.dsp*
MyThemeProvider.java :> uri ~./GreyTheme/img.css.dsp
MyThemeProvider.java :> uri ~./js/ext/timeplot/api/styles/timeplot-bundle.css
this is with the ZKTheme-3.5.2-01-16-Grey.jar in my WEB-INF/lib
gr KV
yes... my mistake... the themes where not shown in the visual editor in my maven ganymede project. Simply adding one of the theme jars in WEB-INF/lib works with an external browser...
Thanks for this themes!
ok. solved for ZKTheme-3.5.2-01-16-Green.
I changed the img.css.dsp file and replaced the line
.z-datebox .z-datebox-img {
background-image : url(${c:encodeURL(c:cat3('~./',project,'/zul/button/DateButton-gray.gif'))});
}
with:
.z-datebox .z-datebox-img {
background-image : url(${c:encodeURL(c:cat3('~./',project,'/zul/button/datebtn.gif'))});
}
now work.
@all
After reading this thread i'm confusing on how to change the current blue theme.
Have someone a little HowTo of changing the Themes???
It's possible to change the theme per java-code at runtime?
thanks
Stephan
how can i change ma zk theme while my program is runnin
Hi hoiliu, I solved the problem with this:
/*
Theme Name: default.css
Theme URI: ZKTheme-3.5.2-01-16-Green
Description:
Version:
ZK Version: 3.5.2
Author: [email protected]
Author URI:
*/
/* ----------- datebox ----------- */
.z-datebox-calyear td { background: #CDE69A; }
.z-calendar-calmon td.z-calendar-seld, .z-calendar-calday td.z-calendar-seld,
.z-datebox-calmon td.z-datebox-seld, .z-datebox-calday td.z-datebox-seld { background: #FFFF8E; border: 1px solid #FFFF8E; }
.z-datebox-over{ background: #CDE69A; }
/* ----------- datebox ----------- */
/* ----------- listbox ----------- */
div.z-listbox-header th.z-list-header { border-right:#CDE69A; }
div.z-listbox { background: #CDE69A; border: 1px solid #9ED235; overflow: hidden; zoom: 1; }
div.z-listbox-footer { background: #CDE69A; border-top: 1px solid #9ED235; }
/* Odd rows in a listbox */
tr.odd td.gc, tr.odd, tr.z-listbox-odd, tr.z-grid-odd td.z-row-inner,
tr.z-grid-odd { background: #F4F7E5 none repeat scroll 0 0; }
/* Selected rows in a listbox */
tr.seld, td.seld, tr.z-list-item-seld { background: #FFFF8E none repeat scroll 0 0; }
/* Selected rows with the mouse hovering over them */
tr.overseld, td.overseld, tr.z-list-item-over-seld { background: #E6F3CD none repeat scroll 0 0;}
/* Unselected rows with the mouse hovering over them */
tr.overd, td.overd, tr.z-list-item-over { background: #E6F3CD none repeat scroll 0 0; }
/* ----------- listbox ----------- */
/* ----------- tree ----------- */
div.z-filetree { border: 1px solid #F4F7E5; }
tr.z-tree-row-seld { background: #FFFF8E; }
tr.z-tree-row-over-seld { background: #E6F3CD; }
tr.z-tree-row-over { background: #E6F3CD; }
/* ----------- tree ----------- */
/* ----------- borderlayout ----------- */
.z-north-collapsed { background: #E4EFCB; border: 1px solid #CDE69A; }
.z-west-collapsed { background: #E4EFCB; border: 1px solid #CDE69A; }
.z-west-split { background: #E4EFCB; }
.z-border-layout { background: #E4EFCB; }
/* ----------- borderlayout ----------- */
/* ----------- toolbar ----------- */
.z-toolbar { background: #E4EFCB; border-color: #CDE69A; }
.z-toolbar a, .z-toolbar a:visited, .z-toolbar a:hover { background: #E4EFCB; border-color: #E4EFCB; }
/* ----------- toolbar ----------- */
/* ----------- tabbox ----------- */
.z-tabs .z-tabs-cnt { border-color: #CDE69A; }
.z-tabs { background: #E4EFCB; border-color: #CDE69A; }
.z-tabpanel { border-color: #CDE69A; }
.z-tabs-header { border-color: #CDE69A; }
/* ----------- tabbox ----------- */
/* ----------- menubar ----------- */
.z-menubar-hor { border-color: #CDE69A; }
/* ----------- menubar ----------- */
/* ----------- grid ----------- */
div.z-grid { border: 1px solid #CDE69A; }
/* ----------- grid ----------- */
/* ----------- combobox ----------- */
.z-combobox-pp .z-combo-item-seld { background: #FFFF8E; }
.z-combobox-pp .z-combo-item-over { background: #CDE69A; }
/* ----------- combobox ----------- */
and include in your zk.xml:
<desktop-config>
<theme-uri>/css/default/default.css</theme-uri>
</desktop-config>
bye.
Asked: 2009-02-03 02:40:52 +0800
Seen: 10,734 times
Last updated: Dec 11 '12