External CSS for JSF

css jsf external
sergionni picture sergionni · Nov 29, 2009 · Viewed 37.7k times · Source

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>

Answer

user220884 picture user220884 · Nov 29, 2009

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.

Related questions

How to remove border from specific PrimeFaces p:panelGrid?

I have difficulty in removing border from a specific PrimeFaces <p:panelGrid>. <p:panelGrid styleClass="companyHeaderGrid"> <p:row> <p:column> Some tags </p:column> <p:column> Some tags &…

Read More
How to set width of a p:column in a p:dataTable in PrimeFaces 3.0?

I'm using PrimeFaces 3.0-M3 and I have a <p:dataTable> with two columns in it. I want the first column to be fixed at a width of 20px. The other column can use whatever space is left over. …

Read More
How do I override default PrimeFaces CSS with custom styles?

I've created my own theme as a separate Maven project, and it is loaded correctly. Now I want to change the size of an component. For example, a <p:orderList>. It has a class called ui-orderlist-list which is …

Read More