PrimeFaces Rio theme color customisation and good practices?

Posts: 1
Joined: 02 Jul 2015, 10:57

02 Jul 2015, 16:01


We're starting a website project and came accross the Rio theme. I'm referring to with what follows.
What we're wondering is how far can we go in customisation without having to touch the theme's CSS, and if buying the layout and theme is worth in our case at all.

Rio is not specifically the only option we want, we just want to be able to do the following:
We'd like to change the look of the website depending on the logged in user.

Theme customisation:
- The .ui-panel-titlebar ("Downloads" example in Dashboard page) seem to be hardcoded to be purple #5C6BC0. Is there any chance to change that background by adding or changing a class? The important part is that we don't change the core CSS files of the theme and preferably don't create additional CSS classes nor make use of precompiling frameworks.
- Can we edit the logo on top left only to make the menu move slightly to the bottom? I tried with a bigger image through Chrome's DevTools but the image overlays to the bottom.
- Is is a good practice to think this way: We're thinking to have a WebpageThemeController with methods that would return the correct class strings depending on the user, to put in the different parts of the website.
- Is considering Primefaces' layout+themes good in this case? If not, how should we proceed?



Posts: 4142
Joined: 29 Jun 2013, 12:38

10 Jul 2015, 01:31


We added Css Less feature for Rio-2.0. ( You can easily change font-size, all colors (background-color, color, border-color etc.), transition.
If you want to change background-color of .ui-panel-titlebar, you can change value of @panel-header-bg-color in theme-variables.less;
@panel-header-bg-color: #XXXXX;

I think you need something like

Posts: 18365
Joined: 05 Jan 2009, 00:21
Location: Cybertron

10 Jul 2015, 11:04

Next version of RIO will provide LESS integration just like Modena;

So for example to change background color of datatable odd numbered rows, there is a variable like @datatable-odd-row-bg-color:


Return to “Rio”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest