Color customisation of Modena

[hinneLinks]

For my company's next web-application we'll think about to use Primefaces with the Modena Theme.
I like the Design, but the Colors doesn't match my company's style guide.
Is it possible to change the whole theme to different colors (e.g. change the color "BlueBack" (http://www.primefaces.org/modena/docs/l ... lors.xhtml) to fit my Company's blue tone)?
Or do i have to adjust every single element (Button, Tab, etc) individually to a different color?

[mert.sincan]

I think you can use blue-modena or indigo-modena for layout.
Screenshot;


We added LESS support for Modena and Rio. (http://blog.primefaces.org/?p=3575)
Less Detail: http://lesscss.org/

For Modena - Theme, If you want to change background-color, transistion, border color, font-size, color in components, you can change value of less variable.

Modena Exp;
in theme-variables.less

Code: Select all

/* button */
@button-bg-color: #0288D1;
@button-font-size: 14px;
@button-color: #ffffff;
@button-text-bg-color: #176BA0;
@button-text-bg-color-hover: #29A1EC;
@button-bg-color-focus: #29A1EC;

/* menu */
..

Similar issue about less; http://forum.primefaces.org/viewtopic.php?f=26&t=42661

[hinneLinks]

Thank you, i'll have a look into LESS.

The theme Color Variations only affect the Top Bar and the Background? It doesn't seem to have an effect on tables or buttons.


Is it possible with LESS to change the three default-fonts (Roboto Font - http://www.primefaces.org/modena/docs/l ... font.xhtml) to a custom font with a custom src-url?

[mert.sincan]

The theme Color Variations only affect the Top Bar and the Background?

- Yes, only the Top Bar and the Background.

Is it possible with LESS to change the three default-fonts

- it is not possible with Less. You can add your fonts in font folders and change font-faces in modena-font.css, modena-layout.less