Hints & tricks: Apply ZMI styles to differentiate your Plone sites

Development
1

From time to time we have to go into the deep depths of the ZMI to do some inspections or even manual changes.

We had a little incident, where some manual changes were accidentally done on the wrong system. Note, that we have multiple systems (dev, staging, test, training) that are hard to differentiate on the casual glance. Which especially is true, when tunneling to some frontends via ssh -L 5000:localhost:8080 user@my-plone-system and just browsing in the ever same looking ZMI.

I present here a small helper in case someone has faced similar issues. We do this by making the ZMI visually slightly different. And the best thing, it’s all TTW (through-the-web). Yay! :slight_smile:

The result looks like this:

image
image1159Ă—835 59.3 KB

Steps to achieve this:

  1. Go to Zope Site Root ZMI → Select “type to add” and choose File
  2. Enter for id the filename custom_style.css. Click “Add” button.
  3. Edit the file again with with this contents:
custom_style.css 
body {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'>\
<text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' \
font-family='Arial, Helvetica, sans-serif' font-size='80' font-weight='bold' \
fill='rgba(200,0,0,0.05)' transform='rotate(-30 300 200)'>\
LIVE SYSTEM\
</text>\
</svg>");

  background-repeat: repeat;
}
  1. Go to Zope Site Root ZMI → Properties
  2. Add new property zmi_additional_css_paths with type “lines”. Click “Add” button.
  3. Enter custom_style.css in the new textarea and Click “Save changes” button.

Done. You may of course change the styles to your liking.

6 Likes
2

Nice... and applied! It worked in the Plone subfolder with VHM, so you can apply it also to <web address of the plone instance>/manage.