Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi,
Sorry for my thumb question (i do only simple style/css question before).
I've done a ZK "Categorybar light" (see here) - working fine.
I use button's and make he buttonsborder invisible until mouseover. But all my other buttons are also styled that way.
I found the sclass option in the zkdemo - i'm not sure about the difference to the mold.
When i do an own sclass, have i repeat all styles from the original button?
/Robert
Robert,
This might help in your case.
Hi Henri,
thanks - i got it. I've seen this doc, but i was a little bit confused after first reading...
After your hint (Xclass is the way to go) i read it once more - and realize how it work's.
Maybe that's interesting for other users (howto wiki?), here is the code, working in the zkdemo:
<zk>
<style>
.icon, .icon .z-button-cm {
font-family: ${fontFamilyT};
font-size: ${fontSizeM}; color: #4040FF;
cursor: pointer; white-space: pre;
}
.icon .z-button-tl, .icon .z-button-tr, .icon
.z-button-bl, .icon .z-button-br, .icon .z-button-tm,
.icon .z-button-bm, .icon .z-button-cl, .icon
.z-button-cr, .icon .z-button-cm { background-image:none;
}
.icon:hover .z-button-tl, .icon:hover .z-button-tr, .icon:hover .z-button-bl, .icon:hover .z-button-br {
background-image:url(${c:encodeURL('~./zul/img/button/z-btn-trendy-corner.gif')});
}
.icon:hover .z-button-tm, .icon:hover .z-button-bm {
background-image:url(${c:encodeURL('~./zul/img/button/z-btn-trendy-x.gif')});
} .icon:hover .z-button-cl, .icon:hover .z-button-cr {
background-image:url(${c:encodeURL('~./zul/img/button/z-btn-trendy-y.gif')});
}
</style>
<hbox style="background-image:url(/zkdemo/img/category-bg.png); background-repeat: repeat-x 0 0;padding-top:7px"
align="end">
<button image="/img/Centigrade-Widget-Icons/FormsAndInputs-48x48.png" sclass="icon" orient="vertical"
label="Forms and
Input" onClick='alert("Forms and Input")' />
<button image="/img/Centigrade-Widget-Icons/ToolbarsAndMenus-48x48.png" sclass="icon" orient="vertical"
label="Toolsbars
and Menus" onClick='alert("Toolbars")' />
</hbox>
</zk>And my real life Application (beta).
BTW 1: The ZUL Visual Editor ignores the whitespace - is cr/lf a dirty solution or is this a bug from the VE?
BTW 2: A hover-example would be an improvment for the docs. I read t styleguide and see z-button-over and try
icon-over because it works for (z-button -> icon). I need some time to figure out the correct syntax.
/Robert
Hi Robert,
I am working on the ZKDemo like Categorybar and didn't get any idea to create it, and I know that you are success to implement it from your beta page: http://www.pichelhofer.at/Tandembox/main.zul.
Would you please give some information or sample code about it?
My email: [email protected]
Thanks a lot.
/Angus
Asked: 2009-01-28 17:12:34 +0800
Seen: 484 times
Last updated: Jul 24 '09
