ZK - Open Source Ajax Java Framework

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!

Hi, the new Themes don't display the calendar icon. It's a bug? I have only put the jar in WEB-INF/lib.

Thanks.
Alex.

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

After using the jar file, I got this. Some border remain in blue. Is there a bug in the theme file?

thanks
Hoi

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: alexbally@libero.it
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.

@ivanchang.

Hi ivan. great work.

But i have a problem with the bandbox. The search image is missing. I used the gray theme. Don't know if it's missing in the other themes too.

See this Thread.

regards Stephan

Here I've problem with group box header middle is not filling with new theme.

Yes, i hope the themes where updated to 3.6.x

Stephan

Thank you so much, I got latest theme and working perfectly.

@ Dhanapalan

From where do you got it?
Is there a gray theme in it?
v 3.6.x ??

Stephan

its blue theme V 3.5 and I added few my images. after up-dating latest version working good.

-Dhana

I've written a perl hack that uses imagemagick to produce different themes automatically. The idea is copied from ZKThemes. The difference is that it extracts all css and images directly from the zk jars, then it transforms colors using imagemagick "modulate" filter. It also processes html colors found in css stylesheets, so the borders and backgrounds come out right. At least in the widgets I have tested.

Here you can download a zip file with 7 themes for zk-3.6.2
http://www.mediafire.com/file/alzuz3ynzj3/themes-for-zk3.6.2.zip

If anyone is interested I can share the script.

I tried to access the link without success.

Can you please send an mail to zk team request to upload the application to more apropriate place?

On the other side you can write some thing to teach us how to run the app.

Regards

Looks great! thank you.

Like sousa1981 said. Please write a little bit of it.

I found a difference in the look .

The component Separator does print a double line in the plomo.jar. Please, can you have a look on the separator in the themes?

Many thanks
Stephan