2013-09-16 1 views
3

Как определить фон для <p:menubar> в PrimefacesКак определить фон для p: menubar в 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> 

ответ

5

Как это:

.ui-menubar,.ui-menu-child,.ui-menu { 
    background: #004e8e !important; 
} 
+0

Пожалуйста, объясните сами, почему вы считаете, что необходим «важный» взлом. Это не так, если вы все сделаете правильно. – BalusC

+0

в моем случае для этого: http://img802.imageshack.us/img802/43/4lnd.png –

+1

Это не техническое объяснение. Это всего лишь картина симптом. «! Important» hack часто применяется nitwits, если селектор недостаточно определен и/или файл CSS с селектором некорректно загружен * до * CSS по умолчанию PrimeFaces. Вам просто нужно исправить загрузку и объявление CSS в соответствии с правилом CSS каскадирования и наследования вместо того, чтобы возвращаться к «! Важному» взлому без реального понимания проблемы. См. Также http://stackoverflow.com/questions/8768317/how-do-i-override-those-classes-defined-in-primefaces-css/8774997#8774997 – BalusC

1

Я использовал строку меню, тоже, и я изменил цвет фона из строки меню с помощью CSS, как:

Во-первых, я дал styleClass <p:menubar styleClass="menubar"> , а затем дал ему css opsions, как показано ниже:

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

написать выше тег стиля в <head></head> тега. Надеюсь, это полезно для вас.