Menu
I have the following master template file for my JSF based pages :
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title><ui:insert name="title">MyApp</ui:insert></title>
<h:outputStylesheet name="stylesheet.css" library="styles"/>
</h:head>
<h:body>
<div id="container">
<div id="header">
<ui:insert name="header">
// header content
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
</ui:insert>
</div>
</div>
</h:body>
</html>
In the head section, we have stylesheet.css. This stylesheet contains all my global styles which are common to all pages.
In the template client, I would like to add page specific stylesheet. So, I tried adding the following line in my template client page:
<ui:composition template="/pages/templates/template.xhtml">
<ui:define name="content">
<h:outputStylesheet name="indexPage.css" library="styles" target="head"/>
// body content
</ui:composition>
This, however, does not seem to add indexPage.css in the generated HTML's head section.
I am using Mojarra 2.1.2. Does it support the target attribute? I don't see it listed as one of the available in my autosuggest options in Eclipse.
In case it doesn't, how do I inject the additional page specific CSS while still using templates?
857
Add to your master template file inside head section new template content specially for css files linking:
<h:head>
<title><ui:insert name="title">MyApp</ui:insert></title>
<h:outputStylesheet name="stylesheet.css" library="styles"/>
<ui:insert name="css"/>
</h:head>
In template client page add page specific stylesheet like this:
<ui:composition template="/pages/templates/template.xhtml">
<ui:define name="css">
<h:outputStylesheet name="indexPage.css" library="styles"/>
</ui:define>
...
</ui:composition>
Instead of h:outputStylesheet coud be used <link rel="stylesheet" type="text/css" href="relative path to css file">.
Important that ui:insert for css in master template should be inside h:head.
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
