How to modify style menuitem

asked 2013-07-08 05:03:49 +0800

saprudin2009 gravatar image saprudin2009

Hi All,

I tried modify style zk menu

.z-menubar-hor .z-menu-item-btn { font-weight:bold; color:red; }

but when i call <menuitem id="mnlastLogin" sclass="z-menu-item-btn" label="Login"/>

style did not work.

Please Advice :)

delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted

answered 2013-07-09 12:10:18 +0800

nsharma gravatar image nsharma flag of India
917 1 11

updated 2013-07-09 12:12:51 +0800


the basic concept is that when you put style(CSS) on some pre-defined class (z-menubar-hor , .z-menu-item-btn in your case.),there is no need for you call them(sclass="z-menu-item-btn" not needed.)

They are automatically applied to every element using this class(or class combination in your case.). if you have to prevent getting these property to apply to all components in your project you define your own class over these class like @sjoshi has described:-

.anyNameGivenByYou .anyPredefinedClass{
 font-weight:bold; color:red; 

in your case :

.mymenu .z-menubar-hor .z-menu-item-btn { 



then use your sclass="mymenu".

The concept is like "inheritance" ,only these class(or class combination) extends the properties defined in the code above and only in those elements where you called this "mymenu" class.

More over sometimes ,these property get overridden by some other properties,in this case use like:-

 .mymenu .z-menubar-hor .z-menu-item-btn { 
    font-weight:bold !important;

//pay attention on the "important" attribute

 color:red !important;


This doesn't allow any other property to override your properties.

may this have helped you.

link publish delete flag offensive edit

answered 2013-07-08 05:30:19 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8

updated 2013-07-08 05:53:10 +0800

sjoshi gravatar image sjoshi flag of India
3493 1 8

Please see this example below

 <?page title="" contentType="text/html;charset=UTF-8"?>
    <window id="mainmenubar" apply="org.zkoss.bind.BindComposer"
        border="none" viewModel="@id('vm') @init('com.product.webapp.main.MenuBarVM')">
        <menubar id="mbar" top="0px" left="0px" sclass="mymenubar"
            children="@bind(vm.nodes) @template(empty each.children?'menuitem':'menu')">
            <template name="menu" var="menu">
                <menu label="@bind(menu.name)">
                    <menupopup sclass="mymenupopup"
                        children="@bind(menu.children) @template(empty each.children?'menuitem':'menu')" />
            <template name="menuitem" var="item">
                <menuitem label="@bind(item.name)"
                    onClick="@command('menuClicked',menuitem=item)" />

    /* define common horizontal and vertical property */
.mymenubar.z-menubar-hor,.mymenubar .z-menu-body-seld .z-menu-inner-m  .z-menu-btn
    background-image: none;
    position: relative;
    background: transparent repeat-x 0 0;

/* Change Font Color for Menu which has children and which does not have children */
.mymenubar .z-menu-inner-m .z-menu-btn,.mymenubar .z-menuitem-inner-m .z-menuitem-btn
    color: white;
    font-weight: bold;
link publish delete flag offensive edit

answered 2013-10-01 08:32:04 +0800

saprudin2009 gravatar image saprudin2009

Thank for help, I have resolved this problem, because The Example Style Zk and my zk use is differen verssion :D, thanks ALL

link publish delete flag offensive edit


hehehehe....kk... :)

nsharma ( 2013-10-03 14:06:22 +0800 )edit
Your answer
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

1 follower



Asked: 2013-07-08 05:03:49 +0800

Seen: 81 times

Last updated: Oct 01 '13

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