Jun 4

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

image

You can easily add a watermark to your LightSwitch application…

image

…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

image

First, create a light washed out image.

image

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

image

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

 

image

Open the default.htm file and add:

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

image

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)

4 comment(s) so far...


Gravatar

Re: Adding A Watermark To Your LightSwitch Application

Thanks Michael.

Is there a way to have different watermarks or not watermark at all for some screens?

Thanks,
Dave

By Dave on   6/5/2015 9:37 AM
Gravatar

Re: Adding A Watermark To Your LightSwitch Application

@Dave - It should be possible for JavaScript to detect which page is showing and insert the proper watermark but I know of no examples.

By Michael Washington on   6/5/2015 9:38 AM
Gravatar

Re: Adding A Watermark To Your LightSwitch Application

Thanks Michael.

This is great. We have not nearly seen all that Lightswitch can deliver for RAD LOB apps. You are a true pioneer in opening up all sorts of possibilities for others.

It will also be a long time before something similar with regards to speed of development will become available.

Thanks
Johan

By Johan on   6/9/2015 3:43 AM
Gravatar

Re: Adding A Watermark To Your LightSwitch Application

@Johan - Thanks. I am learning about new things along with you :)

By Michael Washington on   6/9/2015 3:44 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation