A PrimeFaces theme to rule them all!
This project is a Primefaces admin
theme based on Admin LTE and Bootstrap.
This theme is a ~300kb
css file containing Admin LTE and Bootstrap as well as customized Primefaces components to make them look like Admin LTE and Bootstrap.
-
Just add it to your application classpath:
<dependency> <groupId>com.github.adminfaces</groupId> <artifactId>admin-theme</artifactId> <version>1.0.0-RC6</version> <!--<classifier>dev</classifier> uncompressed theme.css--> </dependency>
-
Add this context-param in your web.xml:
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>admin</param-value>
</context-param>
💡
|
If you use Admin Template there is no need to add this project to your classpath neither the web.xml entry. |
The theme uses less as css pre-processor. Each PrimeFaces component has its own less file:
├── admin-lte
│ |
│ ├── bootstrap (1)
│ │
│ ├── skins (2)
│ │
│ └── admin lte less files
│
├── primefaces-admin
│ |
│ ├─ components (3)
│ │ |
│ │ ├── accordeon.less
│ │ │
│ │ ├── autocomplete.less
│ │ │
│ │ └── etc...
│ │
│ ├─ theme.less (4)
│ │
└─ variables.less
-
Bootstrap variables and mixins are used as reference in AdminLTE and admin theme less files
-
Built in skins
-
PrimeFaces components
-
Components and Admin-LTE less files are included in theme.less
After compilation it will generate the theme.css with Admin-LTE, Bootstrap and Primefaces components.
ℹ️
|
Bootstrap.css (from src/META-INF/resources) is included in theme.less but can be removed via maven classifiers |
ℹ️
|
Bootstrap less is not maintained in this project only it’s mixins. |
This project uses maven classifiers to offer multiple faces
(pum intended) of Admin Theme. Below is the description of each classifier and how to use it.
The default theme comes compressed
, with Bootstrap (3.3.7)
embedded and uses JSF resource handling
for loading images and web fonts.
<dependency>
<groupId>com.github.adminfaces</groupId>
<artifactId>admin-theme</artifactId>
<version>1.0.0-RC6</version>
</dependency>
The dev
classifier will bring a theme.css without minification.
<dependency>
<groupId>com.github.adminfaces</groupId>
<artifactId>admin-theme</artifactId>
<version>1.0.0-RC6</version>
<classifier>dev</classifier>
</dependency>
The without-bootstrap
classifier will bring a theme.css without bootstrap embedded so it’s up to the developer to provide Bootstrap within the application.
<dependency>
<groupId>com.github.adminfaces</groupId>
<artifactId>admin-theme</artifactId>
<version>1.0.0-RC6</version>
<classifier>without-bootstrap</classifier>
</dependency>
The without-jsf
classifier will bring a theme.css without JSF resource handling so the theme can be used on projects (derived from PrimeFaces) without JSF like Prime React, PrimeUI or PrimeNG.
<dependency>
<groupId>com.github.adminfaces</groupId>
<artifactId>admin-theme</artifactId>
<version>1.0.0-RC6</version>
<classifier>without-jsf</classifier>
</dependency>
Whenever the theme is updated to a new version in the project users may have to clear their browser caches to get the changes of the new theme. Sometimes a theme update even introduces conflicts and only clearing browser cache fixes them.
To solve this issues you can use a theme classifier called no-cache:
<dependency>
<groupId>com.github.adminfaces</groupId>
<artifactId>admin-theme</artifactId>
<version>1.0.0</version>
<classifier>no-cache</classifier>
</dependency>
This classifier appends the theme version to the name of theme so you need to change the theme name in web.xml:
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>admin-1.0.0</param-value>
</context-param>
To get your hands dirty with admin theme it is recommended to use [Admin Designer] in combination with Brackets or any tool that compile less
files to css on save.
Using designer (which is backed by wildfly swarm) plus brackets will let you change the components less files and see the results instantly.
ℹ️
|
theme.less is already brackets aware so you just need to change any component less file, save it and see the results in Admin Designer. |
See Admin Showcase.
Snapshots are published to maven central on each commit, to use it just declare the repository below on your pom.xml
:
<repositories>
<repository>
<snapshots/>
<id>snapshots</id>
<name>libs-snapshot</name>
<url>https://oss.sonatype.org/content/repositories/snapshots</url>
</repository>
</repositories>