-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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 :)
@saprudin2009,
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 {
font-weight:bold;
color:red;
}
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.
Please see this example below
<?page title="" contentType="text/html;charset=UTF-8"?>
<zk>
<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"
autodrop="true"
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')" />
</menu>
</template>
<template name="menuitem" var="item">
<menuitem label="@bind(item.name)"
onClick="@command('menuClicked',menuitem=item)" />
</template>
</menubar>
</window>
</zk>
/* 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;
}
Thank for help, I have resolved this problem, because The Example Style Zk and my zk use is differen verssion :D, thanks ALL
Asked: 2013-07-08 05:03:49 +0800
Seen: 86 times
Last updated: Oct 01 '13