cancel
Showing results for 
Search instead for 
Did you mean: 
Workflow Hero

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

Jump to solution

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: progidSmiley Very HappyXImageTransform.Microsoft.gradient( startColorstr='#3a4c02', endColorstr='#cccfc8', GradientType=0 );

}
/ *End custom background gradient*/

Thanks

0 Kudos
Reply
2 Replies
Workflow Hero

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

Jump to solution

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);
}

Reply
Workflow Hero

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

Jump to solution

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

0 Kudos
Reply