Change style - but not for all components (mold or sclass?)

asked 2009-01-28 17:12:34 +0800

robertpic71 gravatar image robertpic71
1275 1

updated 2009-01-28 17:15:26 +0800


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?


delete flag offensive retag edit

4 Replies

Sort by ยป oldest newest

answered 2009-01-29 01:46:29 +0800

henrichen gravatar image henrichen
3869 2
ZK Team


This might help in your case.


link publish delete flag offensive edit

answered 2009-01-29 07:09:02 +0800

robertpic71 gravatar image robertpic71
1275 1

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:

       .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 {

       	.icon:hover .z-button-tm, .icon:hover .z-button-bm {
       	} .icon:hover .z-button-cl, .icon:hover .z-button-cr {
        <hbox style="background-image:url(/zkdemo/img/category-bg.png); background-repeat: repeat-x 0 0;padding-top:7px" 
                  <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"
and Menus" onClick='alert("Toolbars")' />

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.


link publish delete flag offensive edit

answered 2009-01-29 15:27:49 +0800

henrichen gravatar image henrichen
3869 2
ZK Team

I don't quite catch your "BTW 1" question. Are you talking about the style designer or ...?
For the BTW 2 suggestion, I will forward to our Style Designing experts :).


link publish delete flag offensive edit

answered 2009-07-24 02:38:42 +0800

anguslipsey gravatar image anguslipsey

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: angus.lipsey@yahoo.com

Thanks a lot.


link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




Asked: 2009-01-28 17:12:34 +0800

Seen: 481 times

Last updated: Jul 24 '09

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More