RE: Visually mark your Dev, QA and Production servers

Laurent Conroux — Fri, 27 May 2022 11:10:48 GMT

Also to take into account the Dark Mode you can just:

replace html:after by body:after
change only the color on dark mode with something like:

[embed:dc8ab71f-3b98-42d9-b0f6-e21e02a0f8e2:23295673-9f03-4a62-b9e2-476c1bf60105:type=css&text=body.sugar-dark-theme%3Aafter%20%7B%0D%0A%20%20%20%20color%3A%20rgba%28255%2C%20255%2C%20255%2C%200.2%29%3B%0D%0A%7D]

RE: Visually mark your Dev, QA and Production servers

Todd Hedrick — Tue, 13 Apr 2021 02:46:47 GMT

I really like this and made a version that just uses the custom JS and you set the watermark text that you want in the config.php file.

custom/clients/base/layouts/base/base.js:

[embed:dc8ab71f-3b98-42d9-b0f6-e21e02a0f8e2:533e340c-3a60-473f-9336-b6233b2b790c:type=javascript&text=%28%7B%0D%0A%20%20%20%20initialize%3A%20function%28%29%20%7B%0D%0A%0D%0A%20%20%20%20%20%20%20%20if%20%28SUGAR.App.config.hasOwnProperty%28%27watermark%27%29%29%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if%28SUGAR.App.config.watermark.length%20%3E%200%29%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20content%20%3D%20SUGAR.App.config.watermark%3B%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20font_size%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%28SUGAR.App.config.watermark.length%20%3E%2012%29%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font_size%20%3D%20%27100px%27%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%20if%20%28SUGAR.App.config.watermark.length%20%3E%206%29%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font_size%20%3D%20%27150px%27%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font_size%20%3D%20%27225px%27%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24%28%27head%27%29.append%28%27%3Cstyle%20type%3D%22text%2Fcss%22%3Ehtml%3Aafter%20%7B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20%2F%2A%20common%20custom%20values%20%2A%2F%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20content%3A%20%22%27%20%2B%20content%20%2B%20%27%22%3B%20%2F%2A%20your%20site%20name%20%2A%2F%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20font-size%3A%20%27%20%2B%20font_size%20%2B%20%27%3B%20%2F%2A%20font%20size%20%2A%2F%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20color%3A%20rgba%280%2C%200%2C%2050%2C%20.1%29%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20%2F%2A%20alpha%2C%20could%20be%20even%20rgba%280%2C0%2C0%2C.05%29%20%2A%2F%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20%2F%2A%20rest%20of%20the%20logic%20%2A%2F%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20z-index%3A%209999%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20cursor%3A%20default%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20display%3A%20block%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20position%3A%20fixed%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20top%3A%2033%25%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20right%3A%200%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20bottom%3A%200%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20left%3A%2010%25%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20font-family%3A%20sans-serif%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20font-weight%3A%20bold%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20font-style%3A%20italic%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20text-align%3A%20center%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20line-height%3A%20100%25%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20%2F%2A%20not%20sure%20about%20who%20implemented%20what%20..%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%2A%20%20%20%20%20%20%20...%20so%20bring%20it%20all%20%2A%2F%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20-webkit-pointer-events%3A%20none%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20-moz-pointer-events%3A%20none%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20-ms-pointer-events%3A%20none%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20-o-pointer-events%3A%20none%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20pointer-events%3A%20none%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20-webkit-transform%3A%20rotate%28-40deg%29%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20-moz-transform%3A%20rotate%28-40deg%29%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20-ms-transform%3A%20rotate%28-40deg%29%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20-o-transform%3A%20rotate%28-40deg%29%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20transform%3A%20rotate%28-40deg%29%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20-webkit-user-select%3A%20none%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20-moz-user-select%3A%20none%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20-ms-user-select%3A%20none%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20-o-user-select%3A%20none%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%20%20%20%20user-select%3A%20none%3B%5Cn%27%20%2B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%7D%5Cn%3C%2Fstyle%3E%27%29%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20%20%20%20%20this._super%28%27initialize%27%2C%20arguments%29%3B%0D%0A%20%20%20%20%20%20%20%20if%20%28app.tooltip%29%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20this.on%28%27render%27%2C%20app.tooltip.clear%29%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%7D%29]

Add this to the config_override.php

$sugar_config['additional_js_config']['watermark'] = 'TEST';

Whatever is put into the watermark parameter gets printed on the screen.
I did this so that I only needed to have the custom JS and so I could change the watermark text regardless of my URL.

RE: Visually mark your Dev, QA and Production servers

John Hoffmann — Thu, 27 Feb 2020 20:54:14 GMT

"mostly coloring the tabs and while this worked for a short while we found ourselves ignoring the colors after a week or two"

We made ours a salmon color, very hard to ignore even after years of use