Set a background image for Forms

  • 26 June 2015
  • 6 replies
  • 131 views
C
Badge +3

Hi,

 

Did anyone tried adding a background image to a smartform?

Please share your inputs.

 

Thanks,

Chetan

6 replies

Albarghouthy
Userlevel 5
Badge +16

Hi Chetan,

 

I guess you can but the background will be on every form you have that uses the same CSS, add the following to your CSS

 

html { 
  background: url(yourImageURL) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Note: you can find CSS file under  C:Program Files (x86)K2 blackpearlK2 smartforms RuntimeStylesThemes 

 

take a backup before you edit it and remember to do an IISRESET to submit changes :)

 

wish it helps

 

 

C
Badge +3

Thanks Mustafa.

 

Regards,

Chetan

C

Hi Mustafa,

 

I tried using it, but couldn't help.

I modified the Sky.css  under theme folder and pasted the html.

I did an IIS reset as well.

Could you please let me know the exact file to be modified.

 

Thanks,

Chetan

Albarghouthy
Userlevel 5
Badge +16

Hi,


 


I think you can implement a quiker way, the following script should be set as an expression on a data label on the form:


 


 <script>$('body').css({background : 'url(URL) no-repeat center fixed});</script>

Note: Check 'Literal' property of the data label


 


hope that helps

C

Thanks Mustafa. I tried it but it didnt help.

Do we need to provide relative or absolute path of image?  I tried both but still no luck.

Please clarify. 

 

Thanks,
Chetan

N

I had same requirment  to apply background color in the View of the form and I achieved using the Data lable control.  I have  performed following steps. 

 

1.  Add Data Label to the form.

2. Add these line to the Text property. 

 

div.row:nth-of-type(2) .panel > .panel-body {
background-color: red;
}

 

Note - I have given "2" in the type bracket because i had to apply in the 2nd Views of the forms. For your case, you can apply CSS for the Form. For exam - you can apply like this. So it will apply to all the elements of the forms. I have just given an example, you can apply other style also.

 

* { 
    background-color: yellow;
}

 

3. Uncheck the Visible property of the Data Label control. We have to hide this controls as there is no need to show.

4. Check the Literal property. We need the control to parse the style tag.

5. Save the form. Now you can try, you will see the background color.

 

 

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings