Chamar css externo utilizando JSF e Primefaces

Front-end
#1

boa dia pessoal, não estou conseguindo utilizar um css externo.

porque será?

Arquivo template:

<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:f="http://java.sun.com/jsf/core"  
      xmlns:ui="http://java.sun.com/jsf/facelets"  
      xmlns:p="http://primefaces.prime.com.tr/ui"> 
    <h:head>
        <title>MyShared - Post your files!</title>
        <link rel="stylesheet" type="text/css" href="css/estilo.css" />
    </h:head>
    <h:body>
        <div id="global">
            <div id="topo">
                
            </div>
                <ui:insert name="conteudo"> Espaço para o conteúdo da tela </ui:insert>
             
             <div id="rodape">
                    
             </div>
        </div>    
        
    </h:body>
</html>

index.xhtml

<?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:f="http://java.sun.com/jsf/core"  
      xmlns:ui="http://java.sun.com/jsf/facelets"  
      xmlns:p="http://primefaces.prime.com.tr/ui"> 
    <h:head>
        <title>MyShared - Your Files Safe!</title>
        <link rel="stylesheet" type="text/css" href="css/estilo.css" />
    </h:head>
    <h:body>
        <ui:composition template="/template.xhtml">
            <ui:define name="conteudo">
                <h:form>
                    <h:outputLabel value="Nome: " for="campo-nome"/>
                    <p:inputText id="campo-nome"/>
                     <br/>
                      <br/>
                    <p:commandButton value="Enviar"/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                     <br/>
                      <br/>
                </h:form>
            </ui:define>
        </ui:composition>
        
    </h:body>
</html>

estilo.css

@charset "utf-8";
/* CSS Document */

#global
{
    width: 100%;
    height: 100%;
    position: absolute;    
}
#topo
{
  position: absolute;
  top: 10px;
  left: 10%;
  width: 800px;
  height: 200px;
  background-image: url('css/header.png');
  
}

#rodapé
{
  position: absolute;
  bottom: 10px;
  left: 10%;
  width: 800px;
  height: 200px;
   background-image: url('css/footer.png');
  
}
#2

No seu arquivo index.xhtml não é preciso declarar as tags h:head e h:body, uma vez que isso já é feito no template. Retire-as do index.xhtml e deixe apenas a tag html e a ui:composition.

Espero ter ajudado!

#3

O correto é vc usar o caminho relativo para o arquivo. Supondo que vc possui um diretório chamado css no contexto da aplicação, ficaria da seguinte forma:

<link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/css/estilo.css" media="screen" />
#4

pessoal tentei as opções e continuo não conseguindo.

#5

Qual o caminho do CSS? Pasta e nome do arquivo?

#6

criei um pacote chamado css.

e passo o caminho dessa forma

/css/estilo.css

#7

Veja como faço no meu tamplate :

<link rel="stylesheet" href="/AcademiaWeb/Style/style.css" type="text/css"/>
		 <meta content='text/html; charset=UTF-8' http-equiv='Content-type'/>
		 <link type="text/css" rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/resources/#{guestPreferences.theme}/theme.css"/>
1 curtida
#8

iai galera estava com o mesmo problema e resolvi assim:

<h:outputStylesheet library="stylesheet" name="index.css" />

e no css externo acessei a imagem assim:


	background-image: url("#{resource['imagens/imgmenu.gif']}");

valeu

#9

Boa noite!

Sugiro você utilizar a resposta do colega acima, porém trocando o # por $. A diferença é que o $ significa que a EL será avaliada imediatamente após o processamento da página, e o # significa que a EL será avaliada de forma diferida, ou seja, quando necessária. Está no Core JavaServer Faces:

Até +!

#10