Use external css file in JSF

Asked

Viewed 929 times

0

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>

Also given any 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 style file: 

body{
    background-color: gray;
}
#efeitoS{
    color: red  ;   
}

For the whole body of the page I managed to use the style. I’m unable to use for the elements that are inside my content (Editable part of the page). Does anyone know how to fix this?

css jsf primefaces

  • Well, I suggest some changes, on your homepage, declare the css like this: <h:outputStylesheet library="pastadoseucss" name="style.css" />, in the components of the first faces call the class through the property styleClass="classecss", and write your css classes like this. {css code ...}

1 answer

0


I’m using a CSS with the same name as yours, to make it work, I declared it as follows: 

  <h:outputStylesheet name="estilo.css" library="css" />
Take a look at the folder structure I used in the image below. As Douglas said. always use styleClass when possible.

Minha estrutura de pastas no NetBeans

Browser other questions tagged css jsf primefaces

You are not signed in. Login or sign up in order to post.