Sbi Scinc
Posts: 0
Joined: Wed Mar 04, 2015 1:12 am

Adding a watermark to a page

I've searched the tutorials, documentation and videos, but can't find how to add a watermark to my pages. Help?

Illya Stepanov
Posts: 0
Joined: Mon Mar 18, 2013 8:48 am

Adding a watermark to a page

Hello -

1) You will need to add to all of the pages in the very end of an html component.
2) Add CSS styles which add position absolute.

Sbi Scinc
Posts: 0
Joined: Wed Mar 04, 2015 1:12 am

Adding a watermark to a page

I have no idea what you just said.

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

Adding a watermark to a page

Hi,

1) Open any page
2) Open palette
3) Find html component
4) Drag&drop it bellow all components on this page
5) Make it div instead of html in Properties
6) Edit it
7) Add your watermark text in html tab of component code<div id='watermark'>MY watermark<>/code
8) Create css file on the project tab
9) Add there styles for your component

Sbi Scinc
Posts: 0
Joined: Wed Mar 04, 2015 1:12 am

Adding a watermark to a page

I guess I should have been clearer. The watermark is an image, not text. Your html editor doesn't seem to like images. How would I add an image as a background image on my pages?

Sbi Scinc
Posts: 0
Joined: Wed Mar 04, 2015 1:12 am

Adding a watermark to a page

Excellent, Alena, thank you much! Took a few tries but finally got it to work using the Custom Background option.

Sbi Scinc
Posts: 0
Joined: Wed Mar 04, 2015 1:12 am

Adding a watermark to a page

One related question: Is there a way to limit that graphic to the startScreen? Or to select different backgrounds for different pages?

Egor Kotov6832188
Posts: 0
Joined: Wed Nov 19, 2014 5:15 pm

Adding a watermark to a page

Hello.

Yes, after
[dsid="mobilecontainer1"] { ... }
selector add next
#startscreen [dsid="mobilecontainer1"] { ... }
selector in CSS file.

startscreen - exact name of your start page.
This way second selector will only for start screen.

Sbi Scinc
Posts: 0
Joined: Wed Mar 04, 2015 1:12 am

Adding a watermark to a page

So I'm supposed to duplicate the exact same code I already have in the CSS file, expect prefacing this time with #startscreen? Here's what I now have in my CSS file:

[dsid="mobilecontainer"]
{
background-image:url("http://xyz.com/sbi-coach/images/water...");
background-repeat:no-repeat;
background-size:cover;
}
#startscreen
[dsid="mobilecontainer"]
{
background-image:url("http://xyz.com/sbi-coach/images/water...");
background-repeat:no-repeat;
background-size:cover;
}

If that's correct, it has no effect on the app.

Return to “Issues”