CODEWITHSUNDEEP
jsfprimefaces
Rajat Gupta
Rajat Gupta

Reputation: 26617

How to build custom themes for Primefaces?

How do I build custom themes for primefaces ? Can I do it using themeroller ?

Upvotes: 5

Views: 17503

Answers (6)

hjelperne
hjelperne

Reputation: 66

Found this online tool for converting themeroller zip to primefaces jar, with instructions for maven usage: https://themeroller.osnode.com/

Upvotes: 4

Arun Raj
Arun Raj

Reputation: 243

see this website http://jqueryui.com/ If you want to make custom theme select theme in task bar and go to theme roller 1.select Roll Your Own button and then make a changes as your need. 2.If you want to use existing theme and you want to change the color means select gallery button i)select a favorite themeii)Edit a theme changes the coloriii)Download theme Finally you get a zip file.Extract a zip file it contains image folder and css file. Copy image and css file.Put images in web content/common/images folder and css file into web content/resources/css. Finally use this link to display your custom theme use the css file

    <link href="./resources/css/example.css" rel="stylesheet" type="text/css" />

Upvotes: 2

Prog3
Prog3

Reputation: 21

you can use PrimeFaces Theme Converter http://www.pftc.de

it works with jquery-ui-1.10.3

Upvotes: 2

samimvp
samimvp

Reputation: 141

See the primfaces website ( http://www.primefaces.org/themes.html ) to make your theme in themeroller then download it.

See this video, also: http://vimeo.com/14235640

Upvotes: 6

Matt Handy
Matt Handy

Reputation: 30025

This topic is covered by chapter 8.2 of Primefaces documentation. Yes, you can use themeroller, optionally you can create a JAR file of your theme. Then you can use it like the other predefined Primefaces themes.

Upvotes: 0

maple_shaft
maple_shaft

Reputation: 10463

It is possible (at least as of 2.2.1) to extract out the images and stylesheets of the individual theme and refer to them dynamically through code. I believe there is a Primefaces component in version 3 that does this for you however.

The following is an example of how I acheive this.

<link type="text/css" rel="stylesheet" href="#{request.contextPath}/themes/#{sessionScopedBean.theme}/skin.css" />

You can use that existing theme as a template and make changes as you see fit. You can also change the theme property of the session bean to dynamically change your themes.

Upvotes: 0

Related Questions