PrimeFaces Rio theme color customisation and good practices?

[sebastienkb]

Hi,

We're starting a website project and came accross the Rio theme. I'm referring to http://www.primefaces.org/rio/dashboard.xhtml 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?

Thanks

Sébastien

[mert.sincan]

Hi,

We added Css Less feature for Rio-2.0. (http://lesscss.org/features/). You can easily change font-size, all colors (background-color, color, border-color etc.), transition.
Exp;
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 https://www.youtube.com/watch?v=jbNdtndIsqk

[cagatay.civici]

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

http://www.primefaces.org/layouts/modena

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