PrimeFaces is using jQuery ThemeRoller CSS theme framework, and come with 30+ pre-designed themes that you can download and apply in seconds. In this tutorial, we will show you how to change a theme n PriceFaces.

 

There are two ways to change a theme :

  1. Using Maven to download and apply.
  2. Download manually and apply.

1. Maven Download

For Maven user, visit this PrimeFaces available theme, select a theme and remember the theme, defined in Maven and configure the web.xml.

In this case, we will show you how to change a default theme (aristo) to glass-x theme.

File : pom.xml

Markup
    //...
<repositories>
<repository>
<id>prime-repo</id>
<name>Prime Repo</name>
<url>http://repository.primefaces.org</url>
</repository>
</repositories> <dependencies> <dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>glass-x</artifactId>
<version>1.0.6</version>
</dependency> <dependencies>
Theme version?
Visit this PrimeFaces repository directly, check the theme folder to know which one is the latest.

File : web.xml

Markup
    //...
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>glass-x</param-value>
</context-param>

Run it, the theme color will be changed, and looking inside the source code, it point to glass-x now.

Markup
<!-- html source code -->
<link type="text/css" rel="stylesheet" href="/project/faces/javax.faces.resource/theme.css?ln=primefaces-glass-x" />

2. Download Manually

For non-Maven user, just visit the PrimeFaces’s repository and download the theme jar manually, and put it in your project classpath, and configure the web.xml.

File : web.xml

Markup
    //...
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>glass-x</param-value>
</context-param>

Change Theme Dynamic

A nice trip to use EL expression to apply a theme dynamically. See following code snippet :

File : web.xml

Markup
  <context-param>
<param-name>primefaces.THEME</param-name>
<param-value>#{loggedInUser.preferences.theme}</param-value>
</context-param>

P.S Reference – PrimeFaces user guide

http://primefaces.org/themes

References

  1. PrimeFaces Available Themes
  2. jQuery Theme Roller
  3. PrimeFaces User Guide

更改primefaces theme的更多相关文章

  1. jekyll bootstrap更改主题theme

    使用主题 介绍: 由于JB版本号0.2.X的主题,如今全然是模块化的.他们跟踪和单独版本号的主题包. 这让每一个人都能够自由公布和共享主题. Jekyll-Bootstrap v 0.2.x仅仅附带t ...

  2. JSF primefaces session view expired 会话失效后页面跳转

    web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=" ...

  3. Primefaces的fileUpload组件使用

    最近在学习Primefaces(当然也是项目中需要用的).在使用其fileUpload遇到了不小的困难,现总结一下供大家及我自己今后参考使用. 1.首先是使用环境配置:正常的Primefaces开发环 ...

  4. ActionBar更改背景颜色(主题)

    1.默认是黑色的背景, 2.更改主题theme为Theme.AppCompat.Light即可,清单文件主题如下: <application android:name="com.ith ...

  5. 做了面向互联网部署的Dynamics 365 CE更改AD FS的登录页面

    摘要: 微软动态CRM专家罗勇 ,回复306或者20190307可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 默认情况下A ...

  6. 继承AppCompatActivity的Activity隐藏标题栏

    继承了AppCompatActivity的Activity无法通过调用requestWindowFeature(Window.FEATURE_NO_TITLE)来隐藏标题栏. public class ...

  7. Jboss7.1 加入realm auth认证 bootsfaces 美化的登录页面

    jboss-as-7.1.1.Final\standalone\configuration: 1, standalone.xml中 <security-domains>标签里面添加: &l ...

  8. 【Ext.Net学习笔记】03:Ext.Net DirectEvents用法详解、DirectMethods用法详解

    Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...

  9. Ext.Net学习笔记07:Ext.Net DirectMethods用法详解

    使用DirectMethods在JS中调用C#方法 我承认,这个标题有点噱头,其实应该是通过DirectMethods,在JS中通过异步调用的方式执行服务器端的方法. 来看一个例子吧: [Direct ...

随机推荐

  1. Apache下开启SSI配置使html支持include包含

    写页面的同学通常会遇到这样的烦恼,就是页面上的 html 标签越来越多的时候,寻找指定的部分就会很困难,那么能不能像 javascript 一样写在不同的文件中引入呢?答案是有的,apache 能做到 ...

  2. 什么是web框架?

    英文原文:http://jeffknupp.com/blog/2014/03/03/what-is-a-web-framework/ 在原文基础上加上了自己在翻译过程中,查看的资料和自己的一些理解,同 ...

  3. 从Nodejs脚本到vue首页看开源始末的DemoHouse

    最近上Github看见了大漠的DemoHouse项目,看到Issues说准备做一个首页,于是我的第一想法就是做一个md列表页面,md文件可以很容易的生成一个html文件.刚刚做好脚本文件,可以生成li ...

  4. sql server死锁神器

    参考文章: http://blogs.msdn.com/b/sqlserverfaq/archive/2013/04/27/an-in-depth-look-at-sql-server-memory- ...

  5. HDInsight - 1,简介

    最近工作需要,要看HDInsight部分,这里要做笔记.自然是官网资料最权威,所以内容都从这里搬过来:https://azure.microsoft.com/en-us/documentation/a ...

  6. learning to rank

    Learning to Rank入门小结 + 漫谈 Learning to Rank入门小结 Table of Contents 1 前言 2 LTR流程 3 训练数据的获取4 特征抽取 3.1 人工 ...

  7. #查看Linux的版本信息

    查看Ubuntu的版本信息 cat /etc/issue lsb_release -a 查看Centos的版本信息 cat /etc/centos-release rpm -q centos-rele ...

  8. 【CodeVS 1037】取数游戏

    http://codevs.cn/problem/1037/ Alice必胜是Alice将硬币移向边权为0的一端并且把经过的边变为0,让BoB无路可走. 这样只要起点到两个方向最近的0边权的端点的边数 ...

  9. JavaScript的DOM操作-重点部分-第一部分

    Window.document 对象 一.找到元素 document.getElementById("id"); 根据id找,最多找一个: var a = document.get ...

  10. 7 static关键字

    class Person { static int i; static void fun() { System.out.println("我是静态函数"); } } 在静态函数中不 ...