# Discourse Web Page Watermark
**URL:** https://meta.discourse.org/t/discourse-web-page-watermark/214108
**Category:** Theme component
**Created:** [January 7, 2022, 3:15am UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108 "2022-01-07T03:15:45Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@saquetim](https://meta.discourse.org/u/saquetim)
#### Post date: [January 7, 2022, 3:15am UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/1 "2022-01-07T03:15:46Z")
This theme component adds a watermark to the page.
It is possible to add any of the following information:
- a short text message
- the username currently logged in
- the timestamp the page was rendered
Several settings allow customizing how and when the watermark will be rendered:
- **show\_watermark\_in\_background** : If enabled will generate and display a watermark on the page.
- **scroll\_enabled** : If enabled the watermark will be scrolled with the page.
- **only\_in\_categories** : List of categories in which the watermark should be displayed.
- **except\_in\_categories** : List of categories in which the watermark should not be displayed.
- **only\_in\_tags** : List of tags in which the watermark should be displayed.
- **except\_in\_tags** : List of tags in which the watermark should not be displayed.
- **if\_site\_title\_matches** : Display watermark only if site title matches this regular expression. See [Discourse Web Page Watermark - #5 by pfaffman](https://meta.discourse.org/t/discourse-web-page-watermark/214108/5) for an use case.
- **or\_if\_url\_matches** : **OR** display the watermark if URL matches any of the regular expressions in the list. Note that the URL tested does not include the host name.
- **tile\_width:** The width (in px) of the tile that contains the watermark information.
- **tile\_height** : The height (in px) of the tile that contains the watermark information.
- **color: The color** of the watermark text.
- **text\_align:** How the text should be aligned relative to x,y coordinates when drawn.
- **text\_rotation** : The angle in which the text should be rotated relative to x,y coordinates when drawn.
- **display\_text** : Text to be rendered in the watermark.
- **display\_text\_font** : The font used to render the text (parsed as CSS font value).
- **display\_text\_x** : The x-axis coordinate of the point at which to begin drawing the text in the tile canvas, in pixels.
- **display\_text\_y** : The y-axis coordinate of the point at which to begin drawing the text in the tile canvas, in pixels.
- **display\_username** : If enabled the watermark will render the current username.
- **display\_username\_font** : The font used to render the username (parsed as CSS font value).
- **display\_username\_x** : The x-axis coordinate of the point at which to begin drawing the username in the tile canvas, in pixels.
- **display\_username\_y** : The y-axis coordinate of the point at which to begin drawing the username in the tile canvas, in pixels.
- **display\_timestamp** : If enabled the watermark will render the timestamp the page was rendered.
- **display\_timestamp\_format** : How the timestamp will be formatted. For information about the valid formats, please refer to [Moment.js | Docs](https://momentjs.com/docs/#/displaying/).
- **display\_timestamp\_font** : The font used to render the timestamp (parsed as CSS font value).
- **display\_timestamp\_x** : The x-axis coordinate of the point at which to begin drawing the timestamp in the tile canvas, in pixels.
- **display\_timestamp\_y** : The y-axis coordinate of the point at which to begin drawing the timestamp in the tile canvas, in pixels.
# Caveats
- If you intend to add a watermark to your forum instance you probably want to tag screenshots taken from it. Be it so that they can be traced back to you or to discourage your users to take screenshots and post on social media for example.
**But it is important to be aware that adding the watermark will hurt readability**. There is a trade-off to be made between UX and having it.
- The watermark is rendered in a `div` below the page. Depending on your theme the components above may cover it, so if you choose to add it to your page your theme must have a lot of transparency. It is possible though to place it over all the components changing `z-index` with CSS. You should also adjust `mix-blend-mode` to improve visibility.
```css
div#watermark-background {
z-index: 99999;
mix-blend-mode: multiply;
}
```
- This component comes with sensible defaults that should work well with most light themes. Adding a watermark to dark themes is tricky though since it will probably have more impact on readability. I strongly encourage you to tweak the settings and CSS to find what works best in your case.
- Since the watermark is rendered in a `div` **any user that knows how to use the Developer Tools in the browser can hide it**. It will do the intended job for probably 99% of the non-technical users but is important to be aware that it is not a foolproof solution.
# Screenshots
## desktop view:
## mobile view:
| | | |
| --- | --- | --- |
| š | **Preview** | [Discourse Watermark - Theme Creator](https://theme-creator.discourse.org/theme/megothss/discourse-watermark) |
| š | **Repository** | [Discourse-Watermark](https://github.com/megothss/discourse-watermark) |
| ā | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| š | **New to Discourse Themes?** | [Beginnerās guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
edit:
- 2022-01-12: Added new settings to control when the watermark is displayed.
---
### Author:  [@Mr.X\_Mr.X](https://meta.discourse.org/u/Mr.X_Mr.X)
#### Post date: [January 7, 2022, 11:15pm UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/2 "2022-01-07T23:15:24Z")
Can it be category based? Some of us might have a certain category only that needs a watermark.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [January 8, 2022, 4:39am UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/3 "2022-01-08T04:39:51Z")
Oh, I see, I got this mixed up with watermarks for images. Iāll edit the title so it is more clear. Kind of an unusual use case.. Iām not aware of _any_ websites that watermark every web page.
---
### Author:  [@saquetim](https://meta.discourse.org/u/saquetim)
#### Post date: [January 10, 2022, 2:54pm UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/4 "2022-01-10T14:54:26Z")
> [@Mr.X\_Mr.X](#):
>
> Can it be category based? Some of us might have a certain category only that needs a watermark.
Nice idea, Iāll do my best to develop this functionality soon.
> [@codinghorror](#):
>
> Oh, I see, I got this mixed up with watermarks for images. Iāll edit the title so it is more clear. Kind of an unusual use caseā¦ Iām not aware of _any_ websites that watermark every web page.
@codinghorror, thank you for clarifying the title.
I agree that it is an unusual use case. As it is right now I think it is useful mostly for private forums in enterprises with a paranoiac security department, like companies in the financial sector.
It was a first MVP. Iāll add functionality from the feedback received from the community.
Hopefully, Iāll be able to add soon the category based filter that Mr. X suggested and that will make it more useful to a broader audience.
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [January 11, 2022, 6:25pm UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/5 "2022-01-11T18:25:57Z")
I just submitted a PR: [skip display if title matches by pfaffman Ā· Pull Request #1 Ā· megothss/discourse-watermark Ā· GitHub](https://github.com/megothss/discourse-watermark/pull/1)
This adds a theme setting `include_if_title_matches`, which is empty by default. If the setting is empty, then nothing is changed.
If the setting has a value, `SiteSetting.title` must match in order for the watermark to display.
Use case is to have the watermark display on a staging site, but not production without requiring changes to the database. Setting `include_if_title_matches` to āstagingā and having āstagingā in `SiteSetting.title` of the staging site (set in an ENV variable so it persists when the production database is restored to it), the watermark displays on staging site but not on production.
With this change, Iāll install this on every site that has a staging site.
---
### Author:  [@saquetim](https://meta.discourse.org/u/saquetim)
#### Post date: [January 13, 2022, 1:39am UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/6 "2022-01-13T01:39:27Z")
> [@pfaffman](#):
>
> I just submitted a PR: [skip display if title matches by pfaffman Ā· Pull Request #1 Ā· megothss/discourse-watermark Ā· GitHub](https://github.com/megothss/discourse-watermark/pull/1)
Iāve merged it today. Tweaked it slightly. The setting name was renamed to `if_site_title_matches`.
Can you try and check if the latest commit works in your older instances?
> [@Mr.X\_Mr.X](#):
>
> Can it be category based? Some of us might have a certain category only that needs a watermark.
> [@codinghorror](#):
>
> Kind of an unusual use caseā¦ Iām not aware of _any_ websites that watermark every web page.
Iāve just released a new version that allows the watermark to be displayed in specific categories, tags, or URLs.
With the new options, I think it will cover much more use cases.
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [January 13, 2022, 8:04pm UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/7 "2022-01-13T20:04:57Z")
> [@saquetim](#):
>
> Can you try and check if the latest commit works in your older instances?
I can confirm that it works on both my production and staging sites; the former was working with `Discourse.siteSettings.xxx` when I was working on this (Iām about to do an upgrade that I think might change that).
Itās a big help to see my staging site with the watermark on it. Thanks for the theme!
---
### Author:  [@baylands](https://meta.discourse.org/u/baylands)
#### Post date: [January 22, 2022, 3:36pm UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/8 "2022-01-22T15:36:16Z")
Is it possible to add an option to create a (functionally) invisible watermark? Say, one or two color values off from the background, and under everything else? We could then look at any screenshot and look for those color values to discover the username text.
Use case is not to dissuade screenshots but to find out which user is screenshotting and distributing posts from a private forum.
Alternatively, since our forum uses auto light/dark switching, is it possible to run two copies of the theme in order to hard code the color values? Or perhaps make the watermark color a per-theme setting?
Thanks for this. Might be a perfect solution for us.
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [January 23, 2022, 11:43am UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/9 "2022-01-23T11:43:07Z")
> [@baylands](#):
>
> Use case is not to dissuade screenshots but to find out which user is screenshotting and distributing posts from a private forum.
Maybe if you can dissuade them then theyāll stop and it wonāt matter who it was?
I think having it change the color depending on the current theme will be difficult. If what you want is to try to catch someone by having a secret watermark then your best bet would be to disable the other theme.
---
### Author:  [@saquetim](https://meta.discourse.org/u/saquetim)
#### Post date: [January 23, 2022, 2:26pm UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/10 "2022-01-23T14:26:47Z")
@baylands,
> [@baylands](#):
>
> Is it possible to add an option to create a (functionally) invisible watermark? Say, one or two color values off from the background, and under everything else? We could then look at any screenshot and look for those color values to discover the username text.
>
> Use case is not to dissuade screenshots but to find out which user is screenshotting and distributing posts from a private forum.
Theoretically, it is possible. But I would test it carefully before using it in production. Since in your use case there will be almost no contrast between the watermark and the background color there is a pretty good chance that this information may get lost in compression depending on format and the settings applied when uploaded.
The primary use case for this component is to dissuade the screenshots but you can try your approach and see if works. That would be a use case Iāve never thought about before.
> [@baylands](#):
>
> Alternatively, since our forum uses auto light/dark switching, is it possible to run two copies of the theme in order to hard code the color values? Or perhaps make the watermark color a per-theme setting?
> [@pfaffman](#):
>
> I think having it change the color depending on the current theme will be difficult. If what you want is to try to catch someone by having a secret watermark then your best bet would be to disable the other theme.
It is possible to use this component with both light and dark themes simultaneously. It is a use case I thought about when developing it. You donāt even need to run multiple copies of the same component.
The `color` setting does support using a CSS variable. For example, the default value for this setting is `var(--primary-low)`.
So as long as a CSS variable set with the proper colors is used in all the themes you want to be watermarked. You should be good to go!
If you try, please let me know if it works as you expected.
---
### Author:  [@baylands](https://meta.discourse.org/u/baylands)
#### Post date: [January 23, 2022, 5:03pm UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/11 "2022-01-23T17:03:13Z")
Thanks, this clears up a lot of things!
I ran into an issue when trying the variable route.
Our only _theme_ is the light theme, which uses the light and dark color palettes for its auto dark mode.
I can add a variable āāsecondary-watermarkā to the light _theme_ css, but it doesnāt change when using the dark _color palette_ on the light _theme_.
I canāt figure out how to add the variable to the color palette rather than the theme, so as a result, the light themeās override only works with the light color palette, and when the color palette shifts automatically to dark, the watermark becomes instantly visible.
Itās a weird quirk that I had to think about for a while. Offhand, do you know if you can perform calculations with a variable? Such that I could define --secondary-watermark as --secondary minus 10? Or something like that? If so, I think that would do it.
Our use case is admittedly a little niche. I doubt that a visible watermark would dissuade because folks would try and figure out how to get around it. Weāre a closed membership group and need to be able to kick out the people that spread screenshots around. Thatās more important to us.
Thanks again!
---
### Author:  [@baylands](https://meta.discourse.org/u/baylands)
#### Post date: [January 23, 2022, 6:03pm UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/12 "2022-01-23T18:03:57Z")
I got it using the if is-light-color-scheme function. Works exactly as expected. Thanks!
---
### Author:  [@adambirds](https://meta.discourse.org/u/adambirds)
#### Post date: [December 17, 2022, 1:24am UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/13 "2022-12-17T01:24:40Z")
This is actually great for us, we kept getting private forum posts posted on social media by people infiltrating our group to try and make us look bad so having this would prevent ir or easily allow us to block the offending users. Thanks @saquetim for developing this.
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [January 4, 2024, 9:26pm UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/14 "2024-01-04T21:26:55Z")
Youāve got some deprecations.
```plaintext
deprecate-shim.js:33 DEPRECATION: [THEME 15 'discourse-watermark'] Usage of the Ember Global is deprecated. You should import the Ember module or the specific API instead. [deprecation id: ember-global] See https://deprecations.emberjs.com/v3.x/#toc_ember-global for more details.
```
```plaintext
DEPRECATION: [THEME 15 'discourse-watermark'] Using `run.schedule` has been deprecated. Instead, import the value directly from @ember/runloop:
import { schedule } from '@ember/runloop'; [deprecation id: deprecated-run-loop-and-computed-dot-access]
```
Iād try to help but Iām putting out my own š„
---
### Author:  [@saquetim](https://meta.discourse.org/u/saquetim)
#### Post date: [January 4, 2024, 10:04pm UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/15 "2024-01-04T22:04:57Z")
This one is personal. š¤£
I also need to refactor it to move away from widgets.
There is no need for that anymore.
Will try to fix it as soon as I get some free-time. š
---
### Author:  [@Ventrilo](https://meta.discourse.org/u/Ventrilo)
#### Post date: [January 10, 2024, 12:22pm UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/16 "2024-01-10T12:22:04Z")
It doesāt work very well on the theme Iām using, more customisable options would be great, like being able to decide how much of the page the watermark takes up (so it only takes up the post content/background of the page, not e.g the header when browsing sections)
Regarding my theme, no matter what colour selector css i use and no matter how bright the colour is, the text/SVG appears dark/black
---
### Author:  [@Ventrilo](https://meta.discourse.org/u/Ventrilo)
#### Post date: [January 28, 2024, 11:30am UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/17 "2024-01-28T11:30:27Z")
Any update coming for this? @saquetim
---
### Author:  [@yoke\_snowwolf](https://meta.discourse.org/u/yoke_snowwolf)
#### Post date: [March 4, 2024, 11:22am UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/18 "2024-03-04T11:22:35Z")
Good component, But it does not support ember 5?
I get the errorļ¼ReferenceError: Ember is not definedļ¼
my instance ember version is v5.5.0.
@saquetim
---
### Author:  [@saquetim](https://meta.discourse.org/u/saquetim)
#### Post date: [March 4, 2024, 4:46pm UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/19 "2024-03-04T16:46:43Z")
Iāll try to get some time to work on a compatible version soon.
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [September 12, 2024, 6:26pm UTC](https://meta.discourse.org/t/discourse-web-page-watermark/214108/20 "2024-09-12T18:26:08Z")
Hey @saquetim . Have you had a chance to look at this? Looks like itās still broken:
[Next page](https://meta.discourse.org/t/discourse-web-page-watermark/214108.md?page=2)