How can I put my Primefaces theme into a re-usable jar?

Question

I'm following BalusC's excellent answer here, which goes through the steps of packaging up JSF content into a jar so it can be shared across multiple apps. This includes specifying common css files. I'd like to put my primefaces theme.css in the jar, however primefaces is quite prescriptive in how to include the theme. ie. it should be in a folder like (resources/primefaces-mytheme/theme.css), then the web.xml should include:

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

If I put my theme into the jar like so (for example)...

CommonWebProject
 |-- META-INF
 |    |-- resources
 |    |    -- common
 |    |         |-- css
 |    |         |    -- theme.css

...what should the context param then look like in a project that uses the jar? (or maybe there should be a web.xml file in the jar itself?)

Edit: An alternative solution would be to somehow stop primefaces from inserting it's default theme. Then I could simply insert my own theme in the normal way in my template's header.

Is it a theme created by yourself? A primefaces theme used to be created using [JQueryUI ThemeRoller](http://jqueryui.com/themeroller/). Or are you just overriding PF components default CSS styles? — Aritz, Jan 21 '14 at 09:37
Hi @XtremeBiker, it was originally created with ThemeRoller but has changed over time. I've tried omitting the context-param and inserting the theme normally in my template header, but the css from the default primefaces theme then interferes my own — Daniel Loiterton, Jan 21 '14 at 09:55
actually, if I could stop primefaces from automatically bringing in its default theme, that would also solve my problem — Daniel Loiterton, Jan 21 '14 at 10:00
Actually you can achieve that setting `none` to your context param. Don't know if this will work for you. I think the ideal thing would be to have the jar in your classpath and reference your own theme from the context param. For that, you might be sure the jar is actually a JSF resource. To test for that, just create a managed bean there and be sure you can reference it from your application. — Aritz, Jan 21 '14 at 10:06

Daniel Loiterton · Accepted Answer · 2014-01-21T21:27:17.177

So, as per Xtreme Biker's comment, you can turn off the default primefaces theme with:

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

You can then add your custom theme manually using something like...

<h:outputStylesheet library="primefaces-mytheme" name="theme.css" />

I use a standard facelets template for all pages within my app, so this css file gets added to every page with this single line.

If the order of css files is important (as it is for me) you can also use something like...

<f:facet name="last">
    <link type="text/css" rel="stylesheet" 
          href="#{request.contextPath}/javax.faces.resources/primefaces-mytheme/teccura.css.xhtml"/>
</f:facet>

...within the header to dictate that the link should be inserted 'first', 'middle' or 'last'. (I use 'last' to make sure my css overrides primefaces.css).

It may be neater to somehow point primefaces to the css using the context-param (and if someone knows how to do this, please let me know), however this approach does give more control. So I can, for instance, now name my folders and files whatever I like - ie. common/css/mytheme.css rather than primefaces-mytheme/theme.css

Instead of that `` in ``, you can also just put `` in top of ``. See also http://stackoverflow.com/questions/8768317/how-do-i-override-those-classes-defined-in-primefaces-css/8774997#8774997 — BalusC, Jan 22 '14 at 07:04
ok, thanks again @BalusC. Would you say that's better practice or just a valid alternative? — Daniel Loiterton, Jan 22 '14 at 08:46

How can I put my Primefaces theme into a re-usable jar?

1 Answers1