How to link external CSS resource with JSF h:outputStylesheet?

14.8k views Asked by At

I was wondering if I can use <h:outputStylesheet/> to link CSS from an external resources. I want to link the Yahoo Grids. Using the following code, I got a RES_NOT_FOUND:

<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:tcmt="http://java.sun.com/jsf/composite/tcmt/component">

    <h:head>
    </h:head>
    <h:body>
        <h:outputStylesheet library="css" name="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css" target="head" />
     </h:body>
</html>
1

There are 1 answers

0
Valter Silva On BEST ANSWER

You can keep using plain HTML for that:

<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css" />

When you use the <h:graphicImage/> or <h:outputStylesheet/> or <h:outputScript/>, then the file needs to be inside the /resources folder of the web application itself. See also How to reference CSS / JS / image resource in Facelets template? But if the file is not provided by the web application, then you should use plain HTML <img/> or <link/> or <script></script> for this.

Instead of plain HTML <link/> you can also download this .css and put in the /resources folder of the web application so that you can use <h:outputStylesheet/>.