Question

I am using PrimeFaces. As PrimeFaces uses its own jQuery, jqueryUI, jQuery-UI.css. I am using ui:composition. What i did i included a line in my template page like this

layout.xhtml

 <h:head>       
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
        <ui:insert name="title">Login</ui:insert> 
    </title>      
    <ui:insert name="style"></ui:insert>
</h:head>

Then on my page i used something like this

<h:body>
    <ui:composition template="./WEB-INF/templates/layout.xhtml">           
        <ui:define name="title">Add News</ui:define>
        <ui:define name="style"><h:outputStylesheet library="css" name="basit.css"/> </ui:define>
        <ui:define name="content">
            <h:form id="news_advertisement_form"  >
            ...
            </h:form>
        </ui:define>
    <ui:composition>
</h:body>

This is including basit.css on my page but the problem is , css is including before primefaces css and jQueries. I want that my css appear after PrimeFaces Css and jqueries. How can i do it?
Thanks

Answer 1

There is an issue logged with PrimeFaces that discusses this problem.

http://code.google.com/p/primefaces/issues/detail?id=2454

Essentially the h:head component is rendering PrimeFaces stylesheets and javascripts after including elements from within the h:head. There is also this issue which looks like it is the same.

http://code.google.com/p/primefaces/issues/detail?id=2478

This issue is marked as fixed in 3.0, however you should try inserting your stylesheet inside the h:body tag instead of h:head as a possible workaround.