Software Design

Design de software em C, C++, Java, etc…

Java: Customizing Primefaces Theme

It’s very simple to customize the primefaces theme. I spent more time researching about how to do it than really doing.

Primefaces uses themeroller to apply themes, so all we need is to create a theme that is compatible with themeroller. In my case, I used the themeroller’s online tool (http://jqueryui.com/themeroller/). This tool allows us to change almost everything on theme’s ui.

After customizing in the online tool I downloaded the theme package and extracted it. The downloaded package comes with 3 folder and one index file. The only thing we need is the content of css folder. Inside css we have custom-theme folder, and inside it the files we need: jquery-ui-1.8.14.custom.css and the images folder.

All we need to do is to copy the 2 items to our project web/resources/ folder, link it with the template and configure our web.xml to don’t use the default theme.

The web.xml file needs a tag like this:

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

And inside the template, add a tag like this:

<link href="#{request.contextPath}/resources/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />

The name of the file jquery-ui-1.8.14.custom.css may be changed to whatever you want and may be placed in any folder ( like resources/theme/ ). The only restriction is that the images folder be in the same location.
That’s it…

Um comentário em “Java: Customizing Primefaces Theme

  1. Chris
    junho 11, 2013

    Thanx a lot. Nice and easy🙂

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Informação

Publicado em junho 29, 2011 por em Java, JSF, Primefaces.
%d blogueiros gostam disto: