Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi, I'm trying to change the default styles for each of the components in ZK but so far I've had no luck. I've been using the style guide to override the component definitions using my own CSS file but for some components the style has not changed. For example, I want to change the background in the area where the tabs reside in a vertical tabbox, but the component keeps the default style. This is my CSS definition:
.z-tabs-ver-scroll, .z-tabs-ver-header {background-image: url(myimage.gif); background-repeat: repeat-y; }
.z-tabs-ver, .z-tabs-ver-cnt {background-image: url(myimage.gif); background-repeat: repeat-y; }
The background keeps getting the default gif file. I'm also having problems changing the style for the buttons on a menubar. Is there an easier way to change the theme without having to provide your own images? I have been searching the forums but I haven't found a complete answer yet. Any help is greatly appreciated. Thanks.
how about disable the image then use color ?
background-image:none; background-color:#cccccc;
<hbox>
<style>
.z-tabs-ver, .z-tabs-ver-cnt, .z-tabs-ver-scroll .z-tabs-ver-header {
background-image:none;
background-color:#F5F8BE;
}
.z-tab-ver .z-tab-ver-body,
.z-tab-ver .z-tab-ver-body em,
.z-tab-ver .z-tab-ver-body .z-tab-ver-inner {
background-image:none;
background-color:#CEE5E1;
}
.z-tab-ver .z-tab-ver-body:hover,
.z-tab-ver .z-tab-ver-body:hover em,
.z-tab-ver .z-tab-ver-body:hover .z-tab-ver-inner {
background-image:none;
background-color:#D5EAE7;
}
.z-tabs-ver-space {
background-color:#CEE5E1;
border-color:#5B8E8D;
}
.z-tab-ver-noclose {
width:0;height:0;
}
</style>
<tabbox id="tb2" orient="vertical">
<tabs width="20px">
<tab label="A" />
<tab label="B" />
<tab label="C" />
<tab label="D" />
<tab label="E" />
</tabs>
<tabpanels>
<tabpanel>This is panel A</tabpanel>
<tabpanel>This is panel B</tabpanel>
<tabpanel>This is panel C</tabpanel>
<tabpanel>This is panel D</tabpanel>
<tabpanel>This is panel E</tabpanel>
</tabpanels>
</tabbox>
</hbox>Thanks for the help. I tried the example above, but it keeps showing the default theme. I'm not sure if its a bug, but I have version 3.5.1. Today I looked at the newest version and saw that in the example you can change to a gray theme. How can I do this and are there other themes?
Thanks for the suggestion, but how does the Theme Provider works? There's not much explanation on the Development Guide section. What I did was to create or edit each of the images that use and form the components. But this approach is extremely time consuming, plus I'm having problems getting it to point to the right image. Does the Theme Provider include other default themes for one to use? If so, how is this done? Thank you very much.
if you want to change default theme, how about use theme tool ?
http://www.zkoss.org/smalltalks/zkTheme/
the latest theme pack release is here
https://zkforge.svn.sourceforge.net/svnroot/zkforge/trunk/zkTheme/release/
I tried using the theme tool and followed the smalltalk, but it didn't work for me. Also, I want to be able to change the themes on the fly. The only method that is currently working for me is using a css file and using it for the style of my page:
<style src="mystyle.css" dynamic="true"/>
But some components are not changing styles. I also tried using ThemeProvider as explained in the Development Guide, but so far I haven't been able to get it to work:
http://zkoss.org/doc/devguide/ch14s06s03.html
Has anyone done this or is there some helpful guide? Thanks.
Asked: 2008-12-10 18:17:06 +0800
Seen: 1,092 times
Last updated: Dec 17 '08
