background color for primefaces menu does not work

UI Components for JSF
Post Reply
iara84b
Posts: 2
Joined: 02 Jun 2018, 07:11

02 Jun 2018, 15:33

I have a template of primefaces, using css I have tried to place the color but the color comes out at the bottom of the center position, but in the p: menubar the color does not appear

with the background-color enabled
https://imgur.com/a/tiidj7A

with the background-color disabled
https://imgur.com/a/cGX56Fn

this is the template primefaces, I create the class. myLayoutStyleClass and I call it in <p: layoutUnit position = "center" styleClass = "myLayoutStyleClass">

Code: Select all

<!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>
         
         <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>


in the index, the menu continues without color, no matter where and how the css class applies

Code: Select all

<?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>
What should I correct so that the css class can be applied?

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 15 guests