CODEWITHSUNDEEP
jsf-2
Sathya Elangovan
Sathya Elangovan

Reputation: 163

jsf2 template and adding style sheet

Trying to use the JSF2 templates feature.The base.xhtml page looks like below

 <?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"
    >

    <h:head>
    <h:outputStylesheet name="test.css" library="style" target="head"/>
    </h:head>

    <h:body>

    <div id="page">
    <div id="header">
    <ui:insert name="header" >
    <ui:include src="/layout/header.xhtml" />
    </ui:insert>
    </div>

    <div id="content">
    <ui:insert name="content" >
     ???
    </ui:insert>
    </div>

    <div id="footer">
    <ui:insert name="footer" >
    <ui:include src="/layout/footer.xhtml" />
    </ui:insert>
    </div>

    </div>

    </h:body>
    </html>

Trying to inherit this template into my page (testpage.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:ui="http://java.sun.com/jsf/facelets"
      >
    <h:body>

    <ui:composition template="/layout/base.xhtml">
    <ui:define name="content">
    Default Page content!!!!
    <h:outputText value="Foo bar" style="green"/>
    </ui:define>

    </ui:composition>

    </h:body>

    </html>

The test.css file is available under the folder webcontent/resources/style and the content of the css file is as follows

.green{
color:#0000FF;      
}

Now the problem is when I try to run the testpage the stylesheet is adding into the page (with view source able to identify) but it is not reflecting in the UI.

Is anything wrong in the above code? Any help on this appreciated.

Upvotes: 0

Views: 1615

Answers (1)

Daniel
Daniel

Reputation: 37061

You should use styleClass attribute (equivalent to the class attribute of plain HTML)

Replace 

<h:outputText value="Foo bar" style="green"/>

With 

<h:outputText value="Foo bar" styleClass="green"/>

Upvotes: 2

Related Questions