Change Background Geometry to an Image?

[UlrichC]

Hi Primefaces Team,

is it possible in Modena Layout/Theme to change the background geometry to a plain image/picture as background, so that the front-elements "fly" over this picture as with the geometry?

Second question: If I get it right, I could customize the complete colors of all form-elements via CSS/LESS? The color of the check-mark of checkboxes as well?

Thanks very much in advance,
Ulrich

[mert.sincan]

is it possible in Modena Layout/Theme to change the background geometry to a plain image/picture as background, so that the front-elements "fly" over this picture as with the geometry?

Please try with;

Code: Select all

.Geometry {
   background-image: url("#{resource['demo:images/optimus.jpg']}") !important;
}

Second question: If I get it right, I could customize the complete colors of all form-elements via CSS/LESS?

Yes, you can change color,background-color, font-size, transition of components with LESS variables. (webapp/resources/less/variables/*.less)

The color of the check-mark of checkboxes as well?

You need to change border-bottom-color and border-top-color values of check-icon on SelectManyCheckbox and SelectBooleanCheckbox. We will add a variable for color of them in next release. For now, please try with;

Code: Select all

.ui-chkbox-box .ui-icon-check{
   border-bottom-color: #000000; 
   border-right-color: #000000;
}

[UlrichC]

Thank you very much for your response.

Then I will try to buy the Modena-Layout/Theme these days...

Thanks again and bye,
Ulrich

[mert.sincan]

You're welcome. We added two variables for color of icon-check. Issue; https://github.com/primefaces/layouts/issues/43
Exp with #fb8c00 (Default color is #26C6DA);

//in theme-variables.less

Code: Select all

@checkbox-check-icon-border-bottom-color: #fb8c00;
@checkbox-check-icon-border-right-color: #fb8c00;

// screenshot