Adding custom css to primefaces mobile jsf page

On August 2, 2013, in JSF, Mobile, Primefaces, by terencejackson

Hi Guys,

if you want to add custom css to your Primefaces Mobile page you habe to use a facet. First of all you have to store your css in a folder located in src/main/webapp (for instance src/main/webapp/resources/css/style.css).

After that you have to include your css in the postInit facet in your page:

1
2
3
4
5
<pm:page >
  <f:facet name="postinit">
    <link type="text/css" rel="stylesheet"href="#{resource['css:style.css']}" />
  </f:facet>
</pm:page>
<pm:page >
  <f:facet name="postinit">
    <link type="text/css" rel="stylesheet"href="#{resource['css:style.css']}" />
  </f:facet>
</pm:page>

#{resource[‘css:style.css’]} means: Lookup a css file named style.css in the resource folder (library).

That’s it, now you can use your css in your page just like:

<p:outputPanel id="container" layout="block" styleClass="<strong>customClass</strong>">

 

Tagged with:  

Leave a Reply

Your email address will not be published. Required fields are marked *