0

Help with styling.

asked 2012-01-03 11:10:29 +0800

adarshcu gravatar image adarshcu
87

Hi All,

I have an issue for which i'm not able to find any solution.

I have two ZK menu items on my home page. One is for language change and the other is general menu. I want to apply completely different styles for them from the one provided by ZK. These two will again have different style from one another.

If i customize the ZK classes, the same styling applies for both of them. However, not using the ZK classes and applying individual classes for each does not give me the kind of freedom needed for the styling.

Is there a work around for this ?

Any help would be much appreciated.

Thanks,

Adarsh.

delete flag offensive retag edit

3 Replies

Sort by ยป oldest newest

answered 2012-01-04 01:09:56 +0800

SimonPai gravatar image SimonPai
1696 1

Give an sclass on each of the root component on which you want to apply different styles. For example:

<menuitem sclass="x" />
<menuitem sclass="y" />

Then the root DOM element of these menuitems will have class "z-menuitem x" and "z-menuitem y" respectively, so you can distinguish them on styles. See the SClass concept.

Regards,
Simon

link publish delete flag offensive edit

answered 2012-01-04 06:02:38 +0800

adarshcu gravatar image adarshcu
87

I tried the above usage, but it does not seem to help me.

<menubar	autodrop="true" sclass="langClass">

Given above is where i applied the style class. There are so many ZK Style classes that are present for menu. So i took the below two classes

.z-menu-body-seld .z-menu-inner-m .z-menu-btn {
	color:#FFFFFF;
}

and changed them as

.z-menu-body-seld .z-menu-inner-m .z-menu-btn langClass{
	color:#000000;
}

for the language menu.

But i do not see any changes. Am i using it wrong ? Are there any examples where i can see it done for components like menu, grid, listbox etc. ?

Thanks.

link publish delete flag offensive edit

answered 2012-01-04 06:28:00 +0800

SimonPai gravatar image SimonPai
1696 1

langClass .z-menu-body-seld .z-menu-inner-m .z-menu-btn {
...
}

It's recommended to work with Firebug or Chrome's built-in DOM element inspector when you customize styles.

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: 2012-01-03 11:10:29 +0800

Seen: 125 times

Last updated: Jan 04 '12

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