JSF/Facelets : CSS file is not being recognized using <h:outputStylesheet> tag

Asked 5/9, 2012 at 12:50 Answered 18/7, 2015 at 6:11

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 :)

Leggat answered 5/9, 2012 at 12:50 Comment(2)

can u please verify in your browser that your css has been loaded. – Marche 5/9, 2012 at 12:55

Rightclick page in browser and View Source and/or press F12 in Chrome/IE9/Firebug and check "Network" section. – Roselynroseman 5/9, 2012 at 13:25

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?

Roselynroseman answered 5/9, 2012 at 13:8 Comment(3)

Yes i have checked this before, and i've put my styles.css in the same path as u said : WebContent/resources/css/styles.css – Leggat 5/9, 2012 at 13:13

In the tree, shouldn't be WebContent/resources/css/styles.css instead of WebContent/resources/css/style.css ? – Fullscale 19/11, 2013 at 15:17

and in case of composition, add the css inside the ui:composition tag – Castrato 4/4, 2016 at 21:45

-4

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

Evannia answered 18/7, 2015 at 6:11 Comment(1)

I downvoted because I consider this as spam, it's the same as BalusC's answer with words removed, answered 3 years later. – Apheliotropic 19/7, 2015 at 13:43

Recommended topics

Hot tags