4

How to define background for <p:menubar> in Primefaces

<p:menubar rendered="#{loginBO.flag=='admin'}" autoSubmenuDisplay="True" style="background-image: url('images/ui-bg_gloss-wave_55_5c9ccc_500x100_png.png')">
    <p:menuitem value="Home" url="/RMGHome.xhtml" icon="ui-icon-home" />
    <p:menuitem value="Filter Search" action="#{leftMenuService.getMenuList}" icon="ui-icon-search" />
</p:submenu>
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
chows2603
  • 167
  • 1
  • 2
  • 12

2 Answers2

5

Like this:

.ui-menubar,.ui-menu-child,.ui-menu {
    background: #004e8e !important;
}
Joffrey Hernandez
  • 1,809
  • 3
  • 21
  • 39
  • Please explain in own words why you think the `!important` hack is necessary. It namely isn't if you do it right. – BalusC Sep 16 '13 at 20:17
  • 1
    That's not a technical explanation. That's just a picture of a symptom. The `!important` hack is often applied by nitwits if either the selector is not specific enough and/or the CSS file with the selector is incorrectly been loaded *before* the PrimeFaces default CSS. You just need to fix the CSS loading and declaration according proper CSS cascading and inheritance rules instead of falling back to `!important` hack without actually understanding the problem. See also http://stackoverflow.com/questions/8768317/how-do-i-override-those-classes-defined-in-primefaces-css/8774997#8774997 – BalusC Sep 17 '13 at 12:48
  • Thanks for explaining BalusC and Lamq :) – chows2603 Nov 17 '13 at 15:48
1

I used menubar, too and i changed background-color of menubar with css like:

Firstly, i gave a styleClass <p:menubar styleClass="menubar"> and then gave it css opsions like below:

<style>
 .menubar {
   background-color: lightblue;
 }
  
</style>
<p:menubar styleClass="menubar">
  <p:menuitem value="Main Page" url="index.xhtml" icon="ui-icon-home"></p:menuitem>
</p:menubar>

write the above style tag in <head></head> tag. I hope it is useful for you.

Caner
  • 43
  • 1
  • 7