How to change menu font?

answered 2013-11-13 06:39:46 +0800

msrednsi
106 ● 2

Using zk 6.5

I'm doing this to change the menu font:

<style>
        .z-menubar-hor .z-menu-btn {
            font-size: 20px;
        }
        .navmenu .z-menu-body-seld .z-menu-inner-l,
        .navmenu .z-menu-body-seld .z-menu-inner-r {
            background: none;
        }
        .navmenu .z-menu-body-seld .z-menu-inner-r {
            background-position: 0 0px;
        }
        .navmenu .z-menu-body-seld .z-menu-inner-m {
            background-image: none;
        }
        .navmenu .z-menu-body-seld .z-menu-inner-m .z-menu-btn {
            position:relative;
            top: 1px;
        }
</style>
 

<menu sclass="navmenu" label="@bind(menu.data.title)">
 

Those styles are in the source code: src/code/archive/web/js/zul/menu/css/menu.css.dsp

I have to override more css rules to get rid of some effects when the menu is selected (-seld) because they are implemented with a fixed size image, and it does not grow.

I'm currenty trying to figure out how to apply this font change only to one menu, not to all the application's menus. I defined a navmenu key (sclass='navkey') to do that but, exactly the font size, does no runs if it's not the global rule:

        .navmenu .z-menubar-hor .z-menu-btn {
            font-size: 20px;
        }
 

Thie does not run! The reason is that the font size is used in a inner html object, a button tag. I'm trying to select this inner button

Any idea of how to target this inner html component so i can style only one menu not the whole application?

answered 2013-11-13 09:06:48 +0800

msrednsi
106 ● 2

I figure it out:

        .z-menubar-hor .navmenu .z-menu-btn {
            font-size: 20px;
        }
 

The .navmenu class has to be just after .z-menu-btn