Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I would like to insert two tabboxes in a window with two different styles. If I use a css-file for the style-definitions for tabbox1 and another css-file for tabbox2 then the second css-definitions are used for both tabboxes. How can I achieve what I want, please help me.
My problem in deeper detail:
I have a window with two tabboxes in it. For both tabboxes I want to use the default css definitions but make a few changes. That´s why I have a css-file "tabbox1.css" that I want to use for the first tabbox and I have a css-file "tabbox2.css" that I want to use for the other tabbox.
I use two java classes for the tabboxes (cTabboxOne.java and cTabboxTwo.java) which I include in the zul-file as follows:
<window>
<tabbox use="cTabboxOne">
...
</tabbox>
<tabbox use="cTabboxTwo">
...
</tabbox>
</window>
the java classes (cTabboxOne.java and cTabboxTwo.java) extend Tabbox and only have a onCreate() method:
(cTabboxOne.java)
public void onCreate() {
Style s = new Style("tabbox1.css");
s.setParent(this.getParent());
setStyle(s.getContent());
}
(cTabboxTwo.java)
public void onCreate() {
Style s = new Style("tabbox2.css");
s.setParent(this.getParent());
setStyle(s.getContent());
}
The tabboxes should use every change from the css-file. The problem is, that the css-file for the second (last) tabbox overrides the css-file for the first tabbox. That´s why both tabboxes look alike (both have the css-definitions of the second tabbox). Is there a possibility to use two different tabboxes like the way I described it (with css-files)?
I think you can use CSS classes to define the two styles and then specify the tabboxes with their classes:
<window>
<tabbox use="cTabboxOne" style="tabbox1">
...
</tabbox>
<tabbox use="cTabboxTwo" style="tabbox2">
...
</tabbox>
</window>
------------------
css file:
.tabbox1 { ... }
.tabbox2 { ... }
I will try it this way but isn´t there a possibility to use the whole css-file? There are more classes that I want to use at the same time and style="tabbox1 tabbox2 ... tabboxn" doesn´t seem an elegant way to solve my problem!?
If there are multiple components that can share a style they can all use the same class. Then you wouldn't name them tabbox1, etc, but use a name that makes sense for each class. My names were just examples. CSS supports a class hierarchy and inheritance that you could exploit.
There still remain some problems...
I have 2 css-files: tabbox1.css with all the definitions for tabbox1 and tabbox2.css with all the definitions for tabbox2. The problem is that I cannot name the css-classes myself because I want to overwrite the default css-classes. So the names of the css-classes are 1) given and 2) the same in both css-files.
tabbox1.css contains:
.z-tab-ver-body {
background-color:#99ccff;
background-image:none;
}
.z-tab-ver-body em {
background-color:#99ccff;
background-image:none;
padding-bottom:10px;
}
tabbox2.css contains:
.z-tab-ver-body {
background-color:#66ffcc;
background-image:none;
}
.z-tab-ver-body em {
background-color:#66ffcc;
background-image:none;
padding-bottom:10px;
}
To reference the css-files I have to include the following lines in the zul file:
<style src="tabbox1.css"/>
<style src="tabbox2.css"/>
Now all the definitions of tabbox1.css are overwritten by the definitions of tabbox2.css (because all the names of the css-classes are equivalent)
That´s why I have to ask again, if there is a possibility to overwrite the default css-definitions for one component two times in a window.
Thanks for your help, I really appreciate it!
I am not a CSS expert and realize that in my ignorance I have misled you a bit. Please have a look at this web page http://dorward.me.uk/www/css/inheritance/#oo-style. It explains that CSS does not support a class hierarchy (as I incorrectly stated previously!) but provides other approaches to achieve similar results. I think you will find the techniques described there (especially the multiple classes approach) will allow you obtain the results you want with a single merged CSS file.
The following link will help even more I think: http://www.w3.org/TR/CSS21/selector.html#class-html. It explains how to use classes to specialize styles for different versions of the same component:
.z-tab-ver-body.class1 {
background-color:#99ccff;
background-image:none;
}
.z-tab-ver-body.class2 {
background-color:#66ffcc;
background-image:none;
}
---------------
<tabbox id="tabbox1" class="class1">...</tabbox>
<tabbox id="tabbox2" class="class2">...</tabbox>
Asked: 2009-03-03 16:54:39 +0800
Seen: 185 times
Last updated: Mar 05 '09
