Skip to main content
Nintex Community Menu Bar
Solved

Background Image

  • November 27, 2017
  • 3 replies
  • 75 views
D

Hi to everyone on the K2 Community.

 

i just started to play around with K2 smartforms (using K2 Five), and coming from a designer background i always like to spice the look and feel up a bit. i would like to accomplish 2 things 

 

1. set the page background to an image

2. set the form color to a 50% opacity 

 

i have read through all the posts on the community pages, but cannot get my script to work loading the background image nor getting the opacity working. i know there is a way getting everything working as i saw a youtube video Igor Jercevich running something similar with a header image load runtime script.

 

 

Best answer by Doodle

Hi Kahn, 

 

thank you for the reply, after some playing around i finally managed to get it working the way i want to. its in line what you also mentioned.

 

here is my css script i use, i created 2 datalabels and for each datalable i used below css in an expression for the datalable  what i use on the form (set to load on initializing) and hide these datalables from my form

 

First Datalable // show 1st view on top of all tabs 


<script language="javascript" type="text/javascript">
$('.view:first').insertBefore(".tabs-top");
$('.tab-box-tabs').each(function ()
{
var ar = this.id;
document.getElementById(ar).style.marginTop = "10px";

});

</script>
<style>
.view>div.innerpanel>div {box-shadow:none !important;}
.view div.panel-body {background-color: transparent !important}
.view div.panel-body {border-style: none !important}
</style>

--------------------------------------------------------------


Second Datalable //insert background image (create a view for this and load image online)

<script> $('body').css('background-image', 'url("your_imageURL_Copy.jpg")').css('background-attachment','fixed').css('background-size','100%');</script>
--------------------------------------------------------------

 

the form opacity i used the below settings in the form settings section

 

Page Color : Transparent
Form Color : rgba (255, 255, 255, 0.6) --> rgba only applies to latest browers i think

 

what i noticed the script is not responding to the "Platinum" theme on my side - dont know if its only my system.. 

 

Also the transparent and rgba properties only work when your form have tabs, else it will make the whole form background transparent, rgba is not working for me on the form color if there is no tabs...

    3 replies

    K
    Forum|alt.badge.img+16
    • khanh1
    • December 21, 2017

    Hi,



    It appears item # 1 can be done with a little bit of css injection. Alternatively, you can create your own custom theme, see K2 Five Developer reference link for more details.


     Getting started with Custom Themes


    http://help.k2.com/onlinehelp/k2five/DevRef/5.0/default.htm#Themes/Intro-Themes.htm?Highlight=theme
     


    1. set the page background to an image.


    I only try with the background color, see steps below, I think it should work with any images too.



    i) Using Chrome Dev tool to identify the css location. In this example, it's '.theme-entry .panel>.panel-body'.


     


    Sample script.


      


    $('.theme-entry .panel>.panel-body').css({"background-color":"red"});

     This is what it looks like when changing the panel body value.


     



     


    ii) Create an unbound rule to call the above script, see community KB link.
    http://community.k2.com/t5/K2-blackpearl/SmartForms-How-to-execute-JavaScript-via-rules/ta-p/90846


     

    D
    K
    Forum|alt.badge.img+16
    • khanh1
    • December 22, 2017

    Hi,


     


    For item # 1, you will need a place to store the images. In my example, I store the image in SP Image library and it seems to work, see video link: http://www.screencast.com/t/4ztBgp6ZgYh


     


    Smartforms theme is Platinum.


    Use this CSS script in your form.  


    <script>$('.theme-entry .panel>.panel-body').css({"background-image":"url('image_location')"});</script>

     

    P
    D
    D
    • Doodle
    • Author
    • Answer
    • January 22, 2018

    Hi Kahn, 

     

    thank you for the reply, after some playing around i finally managed to get it working the way i want to. its in line what you also mentioned.

     

    here is my css script i use, i created 2 datalabels and for each datalable i used below css in an expression for the datalable  what i use on the form (set to load on initializing) and hide these datalables from my form

     

    First Datalable // show 1st view on top of all tabs 


    <script language="javascript" type="text/javascript">
    $('.view:first').insertBefore(".tabs-top");
    $('.tab-box-tabs').each(function ()
    {
    var ar = this.id;
    document.getElementById(ar).style.marginTop = "10px";

    });

    </script>
    <style>
    .view>div.innerpanel>div {box-shadow:none !important;}
    .view div.panel-body {background-color: transparent !important}
    .view div.panel-body {border-style: none !important}
    </style>

    --------------------------------------------------------------


    Second Datalable //insert background image (create a view for this and load image online)

    <script> $('body').css('background-image', 'url("your_imageURL_Copy.jpg")').css('background-attachment','fixed').css('background-size','100%');</script>
    --------------------------------------------------------------

     

    the form opacity i used the below settings in the form settings section

     

    Page Color : Transparent
    Form Color : rgba (255, 255, 255, 0.6) --> rgba only applies to latest browers i think

     

    what i noticed the script is not responding to the "Platinum" theme on my side - dont know if its only my system.. 

     

    Also the transparent and rgba properties only work when your form have tabs, else it will make the whole form background transparent, rgba is not working for me on the form color if there is no tabs...

    Sidebar Buttons
    Nintex Community Home Contact Nintex Support Email Nintex Community Check Nintex Status
    Terms & ConditionsCookie SettingsAccessibility statement