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>