JSF/Facelets : CSS file is not being recognized using tag

I'm working on a project using JSF/Facelets. I want to do some CSS changes on my View XHTML, but nothing happen when i deploy my web application in my Tomcat Server. I've tried many tricks but i've got the same result.

Anyway, here's my "styles.css" :

body { width: 750px; }

#header 
{
width:              100%;
font-size:          36px;
font-weight:        bold;
line-height:        48px;
background-color:   navy;
color:              white;
}

#footer
{
width:              100%;
font-weight:        bold;
background-color:   navy;
color:              white;
}

And this is the main template "Template.html" including "Header.html" and "Footer.html", where i put my "styles.css" using the tag :

<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<h:outputStylesheet name="css/styles.css" />
    <!-- i've also tried this one, using the "library" attribute -->
    <!--
     <h:outputStylesheet library="css" name="styles.css" />
    -->
</head>
<h:body>
<h:panelGroup id="page" layout="block">

    <h:panelGroup id="header" layout="block">
        <ui:insert name="header">
            <ui:include src="Header.html" />
        </ui:insert>
    </h:panelGroup>

    <h:panelGroup id="container" layout="block">
        <h:panelGroup id="content" layout="block">
            <ui:insert name="content">CONTENT</ui:insert>
        </h:panelGroup>
    </h:panelGroup>

    <h:panelGroup id="footer" layout="block">
        <ui:insert name="footer">
            <ui:include src="Footer.html" />
        </ui:insert>
    </h:panelGroup>

</h:panelGroup>

</h:body>
</html>

Anf finally here's my "Main.xhtml" which include the template "Template.html" :

 <?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 xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich" template="Template.html">
<h:body>
    <ui:define name="content">
        <h:form>
            <h:inputText title="inputText"></h:inputText>
            <h:commandButton value="OK"></h:commandButton>
        </h:form>
    </ui:define>
</h:body>
 </ui:composition>

Thanks in advance :)

BalusC

The <h:outputStylesheet> (and <h:outputScript>) requires a <h:head>, but you've there a <head>. Fix it accordingly.

<h:head>
    <h:outputStylesheet name="css/styles.css" />
</h:head>

Further, you need to ensure that the css/styles.css file is been placed in the /resources subfolder of the public webcontent.

WebContent
 |-- resources
 |    `-- css
 |         `-- styles.css
 :

As to your attempt to use the library attribute, be careful with this, using library="css" isn't entirely correct in this context. See also: What is the JSF resource library for and how should it be used?

Aman birjpuriya

Add resources folder under the WebContent

and inside resources create css folder

then access the files like this

h:outputStylesheet library="css" name="myNewStylesFile.css" target="head" under h:head section that you did not add

来源：https://stackoverflow.com/questions/12281839/jsf-facelets-css-file-is-not-being-recognized-using-houtputstylesheet-tag

标签

html