-
FEATURED COMPONENTS
First time here? Check out the FAQ!
I'm facing the following problem and unfortunately it's not the first time when I need to change style of complex component.... :-((
I have a tabbox with mold="accordion" and I want different tabs having their text in different color, for example the first one yellow and the second one red.
This is an example:
<zk> <style> .yellowtb-accordion-text{ color:yellow; font-size:11pt; } .redtb-accordion-text{ color:red; font-size:11pt; } </style> <tabbox mold="accordion"> <tabs> <tab label="First one" sclass="yellowtb"></tab> <tab label="Second one" sclass="redtb"></tab> </tabs> <tabpanels> <tabpanel> Hello </tabpanel> <tabpanel> Hello </tabpanel> </tabpanels> </tabbox> </zk>
Probably I have done a mistake, because I think the sclass attribute should be specified as sclass="yellowtb-accordion-text" and sclass="redtb-accordion-text" (not only the prefix). However, also in this case the HTML source generated by ZK engine is the following (not what I'd expect)... so, this is NOT THE SOLUTION...
... <div id="z_7u_4" class="yellowtb-accordion-text z-tab-accordion z-tab-accordion-seld" z.zcls="z-tab-accordion" z.sel="true" z.box="z_7u_2" z.panel="z_7u_7" z.disabled="false" z.type="zul.tab2.Tab2"> <div align="left" class="z-tab-accordion-header"> <a href="javascript:;" id="z_7u_4!a" class="z-tab-accordion-tl"> <em class="z-tab-accordion-tr"> <span class="z-tab-accordion-tm"> <span class="z-tab-accordion-text">First one</span> </span> </em> </a> </div> </div> ...
try this, the problem is the weighting of CSS Selector.(".yellowtb span" has more weighting)
After knowing the structure of html by using firebug(a firefox plugin),
then I know to add a "span" after sclass name.
<zk> <style> .yellowtb span{ color:yellow; font-size:11pt; } .redtb span{ color:red; font-size:11pt; } </style> <tabbox mold="accordion"> <tabs> <tab label="First one" sclass="yellowtb"></tab> <tab label="Second one" sclass="redtb"></tab> </tabs> <tabpanels> <tabpanel> Hello </tabpanel> <tabpanel> Hello </tabpanel> </tabpanels> </tabbox> </zk>
Asked: 2009-04-08 14:06:45 +0800
Seen: 550 times
Last updated: Apr 15 '09