Change Background Geometry to an Image?

Locked
UlrichC
Posts: 16
Joined: 03 Sep 2015, 23:49

09 Oct 2015, 17:06

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

User avatar
aragorn
Posts: 3641
Joined: 29 Jun 2013, 12:38

12 Oct 2015, 08:59

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
Posts: 16
Joined: 03 Sep 2015, 23:49

12 Oct 2015, 10:25

Thank you very much for your response.

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

Thanks again and bye,
Ulrich

User avatar
aragorn
Posts: 3641
Joined: 29 Jun 2013, 12:38

12 Oct 2015, 13:41

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
Image

Locked

Return to “Modena”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest