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

robertpic71
1275 1

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

delete retag edit

## 4 Replies

henrichen
3869 2

Robert,

This might help in your case.

http://www.zkoss.org/doc/styleguide/ch01s01.html

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:

<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">
label="Forms and
label="Toolsbars
</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

henrichen
3869 2

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 :).

/henri

anguslipsey
6

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.

My email: angus.lipsey@yahoo.com

Thanks a lot.

/Angus

[hide preview]