How to override Primefaces jQuery and css

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

score 3 · Answer 1 · answered Mar 16 '12 at 09:01

<h:head>
    <!--This css will come just before Prime Faces skin.css -->
    <h:outputStylesheet library="css" name="messageDialogStyle.css" />
    <h:outputScript library="primefaces" name="jquery/jquery.js" />
    <h:outputScript >
        $ = jQuery;
    </h:outputScript>
    <h:outputScript library="Javascripts" name="default.js" />
    <h:outputScript library="Javascripts" name="jquery.dialog.js" />

    <!--These all come after PrimeFaces css -->
    <link rel="stylesheet" type="text/css" href="css/humera.css" />
    <link rel="stylesheet" href="css/witp.css" type="text/css" />

    <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>
<h:body>       
    <div>
        <ui:insert name="top1">
            <ui:insert name="style"></ui:insert>
            <ui:include src="header.xhtml" id="header"/>
            </ui:insert>
    </div>
    ....

</h:body>

score 2 · Accepted Answer · answered Mar 07 '12 at 12:23

2

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.

answered Mar 07 '12 at 12:23

maple_shaft

10,435
6
46
74

1

No, after inserting the css inside h:body the css is still appearing before primeFaces css. It means that i can't do nothing in case of Prime Faces 2.2 to put my css after Prime Faces css?...... – Basit Mar 08 '12 at 09:40
@Basit Are you putting the stylesheet in the body or the `ui:define` component in the body? If you put the `ui:define` in the body then it will insert it in the head, because you are defining the content of the `ui:insert` that happens to be in the head. – maple_shaft Mar 08 '12 at 11:49
Thanks you are right. If you include the css in the body then it overrides the Prime Faces css. But i am facing issue. I am using p:calender on my page. Now i am including the ``, in the end, after p:calener, but my p:calender isn't showing when i click on calender button. It means it doesn't matter where you include your css in the page, it will conflict with the Prime Faces jQuery-ui.css? Is there anyway that i can use both on my page without conflicting? – Basit Mar 14 '12 at 10:53
I also noticed one thing that if you use then your css comes just before primefaces skin.css. But if you use , then it comes after the Primefaces css. so instead of use css in the body, i included css in the head section and it comes after the css. It is working fine. – Basit Mar 16 '12 at 08:58

How to override Primefaces jQuery and css

2 Answers2

Linked