given my template page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Evolutionary</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<h:outputStylesheet name="css/estilos.css" />
</h:head>
<h:body>
<div id="container">
<div id="content">
<h:form>
<p:growl id="messages" />
<p:menubar>
</p:menubar>
</h:form>
<ui:insert name="content">
[Template content will be inserted here]
</ui:insert>
</div>
<div id="footer">Versão 1.0</div>
</div>
</h:body>
</html>
Given also some page:
<?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">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="/layout/template.xhtml">
<ui:define name="content">
<h:form id="cadastro">
<p:panel>
<p:messages />
<h:panelGrid columns="3">
<h:outputLabel value="Nome: " rendered="true" />
<p:inputText id="nome" value="#{habilidademb.habilidade.nome}"
size="20" />
<p:message for="nome" />
<h:outputLabel value="Descrição: " rendered="true" />
<p:inputTextarea id="descricao"
value="#{habilidademb.habilidade.descricao}" rows="6" cols="20" />
<p:message for="descricao" />
<h:outputLabel id="efeitoS" value="Possui efeito secundário? : " />
<p:selectBooleanButton id="efeito"
value="#{habilidademb.habilidadeHidden}" onLabel="Sim"
offLabel="Não" style="width:60px" />
<p:message for="efeito" />
<h:outputLabel value="Efeito Secundário: "
rendered="#{habilidademb.habilidadeHidden == true}" />
<p:inputTextarea id="secundario"
value="#{habilidademb.habilidade.efeitoSecundario}" rows="6"
cols="20" rendered="#{habilidademb.habilidadeHidden == false}" />
<p:message for="secundario" />
<p:commandButton action="#{habilidademb.salvar()}" value="Salvar" />
</h:panelGrid>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</html>
And finally my styles file:
body{
background-color: gray;
}
#efeitoS{
color: red ;
}
For the whole body of the page I was able to use the style. I am not able to use for elements that are inside my content (editable part of the page). Anyone know how to solve this?
