0

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

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

Robert,

This might help in your case.

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

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:

<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

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

/henri

link publish delete flag offensive edit

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

anguslipsey gravatar image 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.

Would you please give some information or sample code about it?

My email: angus.lipsey@yahoo.com

Thanks a lot.

/Angus

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

Follow

RSS

Stats

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