# Discourse Web Page Watermark **URL:** \ **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:** 1\ **Showing post:** 1
**Author:** ![saquetim](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/saquetim/32/116400_2.png) [@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: ![image](https://global.discourse-cdn.com/meta/original/3X/8/8/884c7ab9b19602f661d92b4100dd4808ad34f8b6.png) ![image](https://global.discourse-cdn.com/meta/original/3X/6/e/6e492bdfcedb007d8c364a6142a9e2cb1510625d.png) ## mobile view: ![image](https://global.discourse-cdn.com/meta/original/3X/0/6/06deb470d103ee8ae76a083c43008c3ad494a784.png) | | | | | --- | --- | --- | | ๐Ÿ‘“ | **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. --- _[View the full topic](https://meta.discourse.org/t/discourse-web-page-watermark/214108)._