CSS-Ordering in Liferay Single Page Application with JSF/Primefaces

[Stefan Schuhbaeck, modificado hace 6 años.]

Hi,

After fixing the problem (Liferay Faces displays hidden fragments of primefaces comp. on navigation) with Primefaces componets while using Liferays Single Page Application setting, another issue occurs.

When SPA is activated an I use a cusstom Liferay Theme which overwrites PrimeFaces specific CSS Tags on each navigation step the default PrimeFace CSS will be loaded again but the Liferay Theme will not. Now the PrimeFaces StyleSheets will overwrite the Liferay Theme.

I already tried to use <f:facet name="first"> within the header of the xhtml file as mentioned here: Customizable Resource Ordering but the overwrite still happens.

If I remove the PrimeFace default CSS all together in the web.xml it works but I would like to use some of the default styles.

 	
<context-param>
	<param-name>primefaces.THEME</param-name>
	<param-value>none</param-value>
</context-param>

So my question would be, can I define the order of the Stylesheets within the header when using SPA ?

[Kyle Joseph Stiemann, modificado hace 6 años.]

Hi Stephan,
Can you provide the shortest, simplest portlet source code that will reproduce this problem?

I can give you a potential solution now, but it may not be correct and a reproducer would help. A potential solution would be to split up your styles into Liferay theme styles and custom PrimeFaces styles. The Liferay theme styles can be included in the theme. The custom PrimeFaces styles should be included in h:head after the PrimeFaces theme (in the middle facet):

<h:head>
<!-- ...your code here... -->
<f:facet name="middle">
<h:outputStylesheet name="custom-primefaces.css" />
</f:facet>
<!-- ...your code here... -->
</h:head>

- Kyle