2 Replies Latest reply on Sep 1, 2010 10:27 AM by lenyas66

    Using different styles for rich:panelMenuItem on the same page

    lenyas66

      I would appreciate, if somebody could advise me, if it is possible to use different styles for rich:panelMenuItem on the same page.

       

      Here's the issue: I am using panelMenuGroup of particular color and want to replace one group with menu item, so that I could navigate directly from it.

       

      It looks something like that:

       

           Home - menu group

       

                About - menu item, which points to the actual home page

                Help - menu item for help page

       

           Query Tool - menu group

       

                ....

       

      I want to replace top Home menu group with Home menu item, which would work as current About menu item. I couldn't change the class

       

      rich-pmenu-item

       

       

       

      though, since all other menu items should continue to look as before. So, only new Home menu item should change to look as current Home menu group.

       

      I tried changing style inside rich:panelMenuItem as follows, but it doesn't work

       

      <rich:panelMenuItem hoverClass="myClass" label="Home" value="#{menuState.menu['home']}"

       

      actionListener="#{menuBean.select}" action="home" mode="server" style="color: #FFFFFF; background-color: #194F87" >

       

      </rich:panelMenuItem>

       

       

      Would appreciate advice.

       

      Thanks,

       

      Leonid

        • 1. Re: Using different styles for rich:panelMenuItem on the same page
          ilya_shaikovsky

          style="color: #FFFFFF; background-color: #194F87"

           

          should works if you will add background-image:none; color change not visible because default image still applied.

          • 2. Re: Using different styles for rich:panelMenuItem on the same page
            lenyas66

            Hi Ilya,

             

            It doesn't seem to be working as rich-pmenu-item settings defined for the page seem still prevail over the ones in this item.

             

            Here's what I have for the page:

             

            <

            style>

            .myClass

            {

             

            background-color: #ecf4fe;

            }

            .rich-pmenu-top-group-self-label

            {

             

            color: #FFFFFF

            }

            .rich-pmenu-item

            {

             

            background-color: #ecf4fe;

            }

            .rich-pmenu-item-label

            {

             

            background-color: #ecf4fe;

            }

            </

            style>

             

             

            And here's what appears in the item:

            <

            rich:panelMenuItem hoverClass="myClass" label="Home" value="#{menuState.menu['home']}"

             

            actionListener="#{menuBean.select}" action="home" mode="server"

             

            style="color: #FFFFFF; background-color: #194F87; background-image:none;" >

             

            </rich:panelMenuItem>

             

            End result could be seen in the attached file. Check the first menu item on the left.