Jun 4

Written by: Michael Washington
6/4/2015 7:50 PM 

You can easily add a watermark to your LightSwitch application…

…using a method by Chris Cook described here:

https://social.msdn.microsoft.com/Forums/vstudio/en-US/7d34c68e-8e81-4c4f-9c6c-eda30a5a9c12/html-desktop-examples?forum=lightswitch#6187591c-4be1-4090-add2-c947450e54cb

Create A Washed Out Image

First, create a light washed out image.

Name it App-watermark.png and place it in the images folder of the HTMLClient project.

Next, open the user-customization.css file and add the following code:

.ui-body-a.ui-page {
    background-image: inherit;
    background-color: transparent;
}
.ui-body-a.msls-dialog-inner-frame {
    background-image: url(images/app-watermark.png);
    background-repeat: no-repeat;
}
#app-background-div {
    background-image: url(images/app-watermark.png);
    background-repeat: no-repeat;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
}.ui-body-a.ui-icon-searchfield, .ui-input-text, .ui-select, ul.msls-listview li, .msls-table-header {
    opacity: 0.75;
}

 

Open the default.htm file and add:

<div id="app-background-div"></div>

When you run the project, you will now have a watermark.

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(you must have Visual Studio 2013 (or higher) installed to run the code)