Jun
4
Written by:
Michael Washington
6/4/2015 7:50 PM
You can easily add a watermark to your LightSwitch application…
![image image](/Portals/0/Blog/Files/1/3284/Windows-Live-Writer-a80773986b2c_1213D-image_2a0b6ab8-09c0-4319-b9d3-b809e427f72f.png)
…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 image](/Portals/0/Blog/Files/1/3284/Windows-Live-Writer-a80773986b2c_1213D-image_4c4623c3-b098-4e16-aa1c-ca3c2cd2a4e0.png)
First, create a light washed out image.
![image image](/Portals/0/Blog/Files/1/3284/Windows-Live-Writer-a80773986b2c_1213D-image_050a1ae3-8356-4e2b-af53-f084c6787eb7.png)
Name it App-watermark.png and place it in the images folder of the HTMLClient project.
![image image](/Portals/0/Blog/Files/1/3284/Windows-Live-Writer-a80773986b2c_1213D-image_00a67e68-f9f9-418b-a3c4-0ccd6f5507ee.png)
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 image](/Portals/0/Blog/Files/1/3284/Windows-Live-Writer-a80773986b2c_1213D-image_87daf4c1-2fc2-42bd-87fe-24baf7e5622e.png)
Open the default.htm file and add:
<div id="app-background-div"></div>
![image image](/Portals/0/Blog/Files/1/3284/Windows-Live-Writer-a80773986b2c_1213D-image_57f9a453-1758-459e-a32f-61c04d846335.png)
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...
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
|
@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
|
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
|
@Johan - Thanks. I am learning about new things along with you :)
By Michael Washington on
6/9/2015 3:44 AM
|