Compact montage look

[alfvicente]

I've made this mods for zm 1.30 and now again for 1.32.3. It makes the "montage" page look a little more compact and has these features:

- shows each monitor name at the bottom of the monitor
- I've ditched the frames and status bar since I don't care the fps, and status can be guessed by the image border color
- It also sets a blue color to the background so when a camera goes down you can tell just my looking

Here it goes:

In "/usr/share/zoneminder/www/skins/classic/css/base/views/montage.css" add this:

Code: Select all

.monitor {
    position: relative;
    background-color: #0000ff;
}

.monitorFrame[title] {
    color: #0000ff;
}

.monitorState {
    display: none !important;
}

.monitorName {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 10px;
    padding: 0px;
    line-height: 18px;
    border: 2px solid transparent;
}

And in "/usr/share/zoneminder/www/skins/classic/views/montage.php" add this right below <div id="monitorState line (287 in zm 1.32.3):

Code: Select all

<div class="monitorName"><?php echo $monitor->Name(); ?></div>

[ScottishGeek]

This is slightly off topic, but you can easily change the Zoneminder background color and other ccs styles in a chrome browser via the extension TamperMonkey. The below script turns the background to black:

// ==UserScript==
// @name ZM Background Colour
// @namespace http://tampermonkey.net/
// @version 2024-07-12
// @description try to take over the world!
// @author You
// @match https://192.168.1.101/zm/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=1.101
// @require http://ajax.googleapis.com/ajax/libs/jq ... ery.min.js
// @grant GM.addStyle
// ==/UserScript==

GM.addStyle("body{background-color:#000000!important}");