how to create a custom gradient background color in nintex forms.

  • 31 August 2018
  • 2 replies
  • 13 views
G
Badge +1

Hello,

Does nintex only allow solid colors for the background?  I ask because I am trying to create a custom gradient background on a nintex form and I am having trouble. when I use the predefined classes in nintex, the gradient will work but only within the form controls and labels. when I use the container classes( .nf-container-inner, .nf-filler-wrapper, etc.) nothing happens. I want the gradient to cover the background of the form. What css class does nintex forms use for background  ?

The css I use is below. the properties stay the same but the class name changes. 

/*Begin custom background gradient*/
.nf-filler-wrapper-outer{
background: rgba(58,76,2,1);
background: -moz-linear-gradient(top, rgba(58,76,2,1) 0%, rgba(58,76,0,1) 16%, rgba(58,76,0,1) 24%, rgba(204,207,200,1) 80%, rgba(204,207,200,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(58,76,2,1)), color-stop(16%, rgba(58,76,0,1)), color-stop(24%, rgba(58,76,0,1)), color-stop(80%, rgba(204,207,200,1)), color-stop(100%, rgba(204,207,200,1)));
background: -webkit-linear-gradient(top, rgba(58,76,2,1) 0%, rgba(58,76,0,1) 16%, rgba(58,76,0,1) 24%, rgba(204,207,200,1) 80%, rgba(204,207,200,1) 100%);
background: -o-linear-gradient(top, rgba(58,76,2,1) 0%, rgba(58,76,0,1) 16%, rgba(58,76,0,1) 24%, rgba(204,207,200,1) 80%, rgba(204,207,200,1) 100%);
background: -ms-linear-gradient(top, rgba(58,76,2,1) 0%, rgba(58,76,0,1) 16%, rgba(58,76,0,1) 24%, rgba(204,207,200,1) 80%, rgba(204,207,200,1) 100%);
background: linear-gradient(to bottom, rgba(58,76,2,1) 0%, rgba(58,76,0,1) 16%, rgba(58,76,0,1) 24%, rgba(204,207,200,1) 80%, rgba(204,207,200,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a4c02', endColorstr='#cccfc8', GradientType=0 );

}
/ *End custom background gradient*/

Thanks

2 replies

E
Userlevel 5
Badge +14

I'd say it's more about what browser supports which styling, nintex doesn't restrict you (too much) to define whatever CSS/style

.GradBG{
  background-image: radial-gradient(lightblue 25%, blue 75%, darkblue 100%);
}

.GradCtrl{
    background-image: linear-gradient(to right, white, slategray);
}
‍‍‍‍‍‍‍

219000_pastedImage_4.png

219001_pastedImage_5.png

218999_pastedImage_3.png

EuanGamble
Userlevel 5
Badge +13

Hi all,

Our UX team are doing some research into our style builder for Universal Forms. We would appreciate your feedback on your current experience in styling your forms in any platform.

If you would like to provide feedback, please fill out the survey at Applying styles in Nintex Forms 

Thanks,

Euan

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings