•  08-07-2019
  •  | 
  •  

Question

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>
Was it helpful?

Solution

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.

EDIT: Removed starting / from 'href="/${facesContext.ex...'. If the application is running in the root context, the CSS url starts with // and the browsers could not find the CSS since it is interpreted as http://css/style.css.

OTHER TIPS

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

The updated JSF 2.0 method is a bit tidier. Instead of:

<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/compass.css"/>

you now do this:

<h:outputStylesheet library="css" name="compass.css"/>

and the stylesheet resource should be placed in resources\css. Where resources is at the same level as the WEB-INF.

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

Try the code below to import the css in your jsf page.It will work for sure.

<style media="screen" type="text/css">

  @import "#{facesContext.externalContext.request.contextPath}/css/Ebreez.css"

</style>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top