I have the following code on my xhtml page to override default PrimeFaces styling:
<h:body>
<f:facet name="last">
<h:outputStylesheet library="css" name="main.css" />
</f:facet>
...
</h:body>
This works fine when I am using a stylesheet, that is stored locally on my server.
The Problem is, that I want to include a external (dynamic) stylesheet. So when I am changing the <h:facet> to something like the following, it doesn't work anymore.
<f:facet name="last">
<link type="text/css" rel="stylesheet" href="http://host.de/main.css" />
</f:facet>
If I include the <link> element directly into the <h:head> section of my xhtml page the stylesheet is loaded but the rules get overridden by PrimeFaces.
In the next step I would like to set the href attribute dynamic from my ManagedBean to something like this:
<link type="text/css" rel="stylesheet" href="#{bean.cssUrl}" />
Is this even possible? Or is there another way to achieve what I am describing? Any help is appreciated. Thanks in advance.
EDIT:
I tried in Internet Explorer, Firefox and Chrome (each latest version) and none is working. If I use <h:outputStylesheet name="http://host.de/test.css"> instead of <link> I get RES_NOT_FOUND and status code 404.
<facet name="last"/> for stylesheets should only be used in <h:head/> that is where your stylesheets should end up anyway. If you load them last in your body, you can get weird manifestations in the look and feel of your ui. While loading and building the page and having some slower connections or a busy server, the PF stylesheet is used and when finished loading, your custom css kicks in. This might cause reflows, color changes abd what more
I got it working. The solution was to remove the surrounding <f:facet> element and directly put the <link> under <h:body>:
<h:body>
<link type="text/css" rel="stylesheet" href="#{bean.cssUri}"></link>
...
</h:body>
With this solution I am also able to set the URL of the external stylesheet dynamically in the #PostConstruct method of my ManagedBean (scope is #ViewScoped).
EDIT:
It may be working but #Kukeltje's answer is cleaner and more accurate. I was using <f:facet name="last"> wrong.
Updated code snippet:
<h:head>
<f:facet name="last">
<link type="text/css" rel="stylesheet" href="#{bean.cssUri}"></link>
</f:facet>
</h:head>
Related
Following the instructions given on the PrimeFaces getting-started page, I am seeing an odd rendering from SelectOneMenu. It doesn't look the way I'd expect. Does anyone know why?
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:body>
<h:form>
<p:selectOneMenu id ="selectOneMenuCategorie" value="#{selectOneController.categorieSelected}" >
<f:selectItem itemLabel="Select One" noSelectionOption="true"/>
<f:selectItems value="#{selectOneController.categorieList}"
var = "c" itemLabel="#{c.libelle}" itemValue="#{c}"/>
<f:ajax render="selected_item1"/>
</p:selectOneMenu>
<h:outputText id="selected_item1" value="#{selectOneController.categorieSelected.libelle}"></h:outputText>
</h:form>
</h:body>
</html>
You should add
<h:head>
</h:head>
tag to your xhtml page.
The <h:head> is a JSF component which provides a hook to programmatically include JavaScript and CSS resources in the generated HTML <head>. PrimeFaces uses it to include the necessary JS/CSS code for the Ajax works and fancy look'n'feel.
As a test, create a page with a <h:head> and a PrimeFaces component, open the page in the webbrowser and check the generated HTML source by rightclick - View Source. You'll see that several JSF and PrimeFaces specific JS/CSS files are been added. Now replace <h:head> by <head> and check the generated HTML source once again, you'll see nothing this time.
I'm trying to include a stylesheet in one of my aspx pages. The stylesheet is in the directory /Dir1/style.css (relative to the project root). I'm trying to get it to resolve in a page that's at the path: /Dir1/MyPage.aspx. I'm aware that I could just include the stylesheet in the header, since it's in the same directory, but I'm trying to use the runat="server" tag so that it would be easier to move the page later if needed.
This is the line I'm using:
<link runat="server" rel="stylesheet" href="~/Dir1/style.css" type="text/css" media="all"/>
Everything I read indicate this is supposed to work, but no matter what I do, I get a 404 in the browser for that stylesheet. The runat attribute doesn't seem to be doing anything - the path the browser is trying to fetch ends up being: http://localhost:7205/Dir1/~/Dir1/style.css. What am I doing wrong?
try this:
<link runat="server" rel="stylesheet" href="<%= Page.ResolveUrl("~/Dir1/style.css") %>" type="text/css" media="all"/>
And you should not need the runat=server
I have an aspx page with two css links:
<link rel="Stylesheet" type="text/css" href="<%=MyPath %>/Profile.css" id="Link1" runat="server" visible="false" />
<link href="../../Style/ProfileMenu.css" rel="stylesheet" visible="true" />
Each take care of different elements and no dupliacate class names.
when I run the code it works perfect, when i click submit the page reloads but the second css doesnt work.
I tried adding to the first css all the info from the second css and delete the second css (use only one css per page) and nothing changed.
I guess there is a problem with postback..
why ? how to fix it ? how can i check it?
I am creating multi-language web based application using JSF 2.0.
For css earlier I was using
<h:outputStylesheet library="css" name="setFontForAll.css"/>
and inside CSS file I had
font-size: #{msg['myDir'].contains('LTR')?'10pt':'14pt'};
^^^ ^^^
English Arabic
However due to CSS caching, same CSS file is there and I am getting font as 10pt continously even if I choose Arabic.
Hence I added time after CSS.
<h:outputStylesheet library="css" name="setFontForAll.css?#{language.myTimeinMill}"/>
However when I use this, all my CSS goes for toss... I see default page setup (no css is getting invoked)
When I see view source, I get <link type="text/css" rel="stylesheet" href="RES_NOT_FOUND" />
Any idea what I am doing wrong?
Note : I am using JSF 2.0
I am also printing #{language.myTimeinMill} inside body and everytime I see different time.
The only way I see is using the plain <link> tag.
There is no possibility by using <h:outputStylesheet /> to add a parameter in the URL. One answer on this subject doesn't work anymore on JSF 2.0 :
<h:outputStylesheet target="head" name="blank.css">
#import url('css/setFontForAll.css?version=#{language.myTimeinMill}')
</h:outputStylesheet>
It returns a message :
com.sun.faces.renderkit.html_basic.ScriptStyleBaseRenderer
encodeChildren INFO: outputScript with "name" attribute and nested
content. Ignoring nested content.
That said, I suggest this solution :
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/setFontForAll.css?ln=css&version=#{language.myTimeinMill}" />
<ui:fragment rendered="#{msg['myDir'].contains('LTR')}">
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/setFontOverride.css?ln=css&version=#{language.myTimeinMill}" />
</ui:fragment>
Actually, all you need to do is create a folder under webapp/resources/css/mystyle.css where mystyle.css is your css file.
Then in your jsf file, just put
<h:outputStylesheet name="css/mystyle.css" />
JSF will knows and load your css file correctly without the RES_NOT_FOUND error.
PS. this has been tested with primefaces jsf 2.2
I have a JSF 2.0 page that uses this:
<h:head>
<h:outputStylesheet name="screen.css" library="css" />
</h:head>
Which very nicely generates this HTML:
<head>
<link type="text/css" rel="stylesheet"
href="/myapp/javax.faces.resource/screen.css.jsf?ln=css" />
</head>
This is great when the page is being viewed in a browser. However, I want to use this stylesheet embedded in an HTML page that will be emailed to the user. I don't want their email client to load the stylesheet from the server. I want the document emailed to them to be self-sufficient and not be influenced by changes in (or even the absence of) the stylesheet on the website.
I want the HTML output to be like this:
<head>
<style type="text/css">
...contents of screen.css here...
</style>
</head>
I tried to achieve that by using this:
<h:head>
<style type="text/css">
<ui:include src="/resources/css/screen.css"></ui:include>
</style>
</h:head>
But I received this error:
javax.servlet.ServletException: Error Parsing /resources/css/screen.css:
Error Traced[line: 1] Content is not allowed in prolog.
javax.faces.webapp.FacesServlet.service(FacesServlet.java:325)
How can I get the contents of the stylesheet to appear in the head of the document?
Not with standard JSF components.
The JSF utility library OmniFaces has an <o:resourceInclude> for the very purpose of including the raw output of non-JSF webapp resources in a JSF page.
<h:head>
<style type="text/css">
<o:resourceInclude path="/resources/css/screen.css" />
</style>
</h:head>
Note that this doesn't support resource localization and versioning, nor evaluate EL expressions in CSS files like as <h:outputStylesheet> would do.