What is syntax to add external CSS file to jsf?
Tried both ways.Didn't help.
1.
<head>
<style type="text/css">
@import url("/styles/decoration.css");
</style>
</head>
2.
<head>
<link rel="stylesheet" type="text/css" href="/styles/decoration.css" />
</head>
I have never used the first, but the second is syntactically valid and should technically work. If it doesn't work, then the relative URL in the href attribute is simply wrong.
In relative URL's, the leading slash / points to the domain root. So if the JSF page is for example requested by http://example.com/context/page.jsf, the CSS URL will absolutely point to http://example.com/styles/decoration.css. To know the valid relative URL, you need to know the absolute URL of both the JSF page and the CSS file and extract the one from the other.
Let guess that your CSS file is actually located at http://example.com/context/styles/decoration.css, then you need to remove the leading slash so that it is relative to the current context (the one of the page.jsp):
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
I guess that BalusC may have your answer.
However, I would like to add some additional points:
Suppose that you are running the in the sub directories of the web application.
As my experience, you may want to try this:
<link href="/${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>
The '/${facesContext.externalContext.requestContextPath}' link will help you to return immediately to the root of the context.
I think the Sergionni problem is two-fold.
First, it is true that the so-called root relative is, like BalusC said, in fact domain relative, so, in the example is relative to http://example.com/ and not to http://example.com/context/.
So you must specify
<link rel="stylesheet" type="text/css" href="${request.contextPath}/styles/decoration.css" />
BTW BalusC, congratulations, this is the first time I see this correctly explained! I struggled quite a lot to discover this.
But, if you want to simplify and suggest:
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
assuming that the style dir is a sibbling of your current page, then you can have the second problem:
You are then into the relative URL method and, I you came at this page by a forward and not a redirect, your browser may be fooled and not able to follow the relative path.
To solve this second issue, you must add this:
<head>
<base href="http://${request.serverName}:${request.serverPort}${request.contextPath}${request.servletPath}" />
The base element must precede any link.
By the base command, you tell your browser where you are really.
Hope it helps.
And BTW another bizarre thing in this wondeful jsf world:
to link from a page to its facelet template, the root relative link IS, this time, including the context so:
<ui:composition template="/layouts/layout.xhtml">
this links really to http://example.com/context/layouts/layout.xhtml
and not to http://example.com/layouts/layout.xhtml like for <a> or <link>.
Jean-Marie Galliot