primefaces 菜单的背景颜色不起作用答案

【问题标题】：background color for primefaces menu does not workprimefaces 菜单的背景颜色不起作用
【发布时间】：2018-06-03 18:20:33
【问题描述】：

我有一个 primefaces 模板，使用 css 我试图放置颜色，但是颜色出现在中心位置的底部，但是在 p: 菜单栏中没有出现颜色

启用背景色 https://imgur.com/a/tiidj7A

背景色被禁用 https://imgur.com/a/cGX56Fn

这是模板primefaces

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:p="http://primefaces.org/ui"
  xmlns:f="http://xmlns.jcp.org/jsf/core"
  xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
   <title><ui:insert name="title">Default Title</ui:insert></title>
     <h:outputStylesheet library="css" name="jsfcrud.css"/>
     <style type="text/css">
        .myLayoutStyleClass .ui-layout-unit-content   { 
            background-color: #D8D8DA;
     }

</style>   
</h:head>
<f:view>
<h:body>

    <p:layout fullPage="true">

<p:layoutUnit position="north" >  
  <h:graphicImage library="images" name="logo.jpg" />
    <h:panelGrid columns="1" id="headertags">
  <h:outputText id="h1" styleClass="h1Style" value="#{user.name}"/>
  <h:outputText id="h2" styleClass="h2Style"  value="Hora actual:  #{dialogBean.time}"/>
</h:panelGrid>      
</p:layoutUnit>
<p:layoutUnit position="center" styleClass="myLayoutStyleClass" >

        <ui:insert name="content"> 

            Página en construcción


            </ui:insert>

</p:layoutUnit> 

<p:layoutUnit position="south" >
<ui:insert name="footer">

</ui:insert>
</p:layoutUnit>

</p:layout>

</h:body>
</f:view> 
</html>

如果我尝试在索引中应用样式，菜单会继续没有颜色，无论 css 类在哪里以及如何应用

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <ui:composition template="/WEB-INF/templates/template.xhtml"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:f="http://xmlns.jcp.org/jsf/core"
  xmlns:p="http://primefaces.org/ui"
  xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
  >

<ui:define name="title">
<h:outputText value="Pagina Administrador"></h:outputText>
</ui:define>
<ui:define name="content">
<h:form id="menuForm" >

<p:menubar >
    <p:submenu label="Inicio" icon="ui-icon-home">
      <p:menuitem value="Matenimiento Clientes" outcome="clientes/ClienteList"/>
      <p:menuitem value="Matenimiento Vehiculos" outcome="vehiculos/VehiculoList"/>
      <p:menuitem value="Matenimiento Registros" outcome="registros/RegistroList"/>
      <p:menuitem value="Reporte Clientes" outcome="clientes/ClienteReport"/>  
      <p:menuitem value="Reporte Vehiculos" outcome="vehiculos/VehiculoReport"/>
      <p:menuitem value="Reporte Registros" outcome="registros/RegistroReport"/>
      <p:menuitem value="Configuracion Usuarios" outcome="usuarios/UsuarioList"/>   
      <p:menuitem value="Configuracion Grupos" outcome="grupos/GrupoList"/>
      </p:submenu> 
    <p:submenu label="Contraseña">
      <p:menuitem value="Cambiar Contraseña" outcome="usuarios/UsuarioChange"/>
    </p:submenu> 
    <p:submenu label="Salir">
     <p:menuitem value="logout" action="#{user.logout}"  />
    </p:submenu> 

</p:menubar> 

</h:form>    

</ui:define>

<ui:define name="footer">
<h:link outcome="/index" value="Regresar a la Pagina anterior"/>           
</ui:define>    

</ui:composition>

【问题讨论】：

所以如果你不使用 p:layout 就可以了？而且我没有看到菜单的任何 CSS
我创建了这个类。 myLayoutStyleClass 我在中调用它
那是关于布局的！！！您的标题说明菜单

标签： css jsf primefaces

【解决方案1】：

您只为布局定义背景颜色：

 <style type="text/css">
    .myLayoutStyleClass .ui-layout-unit-content   { 
        background-color: #D8D8DA;
 }
 </style>

你需要为你的菜单栏定义一个样式类：

<p:menubar styleClass="mymenubar" >
    ....
    .....
</p:menubar>

并在您的 css 上自定义类：

 <style type="text/css">
    .myLayoutStyleClass .ui-layout-unit-content   { 
        background-color: #D8D8DA;
      }
    .mymenubar .ui-menubar {
        background-color: #D8D8DA;
     }
   </style>

【讨论】：