{"id":10063,"date":"2025-01-02T16:00:12","date_gmt":"2025-01-02T23:00:12","guid":{"rendered":"https:\/\/jasonsblog.ddns.net\/?p=10063"},"modified":"2025-01-05T20:47:25","modified_gmt":"2025-01-06T03:47:25","slug":"tired-of-supermon-7-4s-white-background","status":"publish","type":"post","link":"https:\/\/jasonsblog.ddns.net\/index.php\/2025\/01\/02\/tired-of-supermon-7-4s-white-background\/","title":{"rendered":"Tired of Supermon 7.4&#8217;s White Background?"},"content":{"rendered":"\n<p>There is room for improvement, but I tried to comment what I could figure out and mirrored a dark mode to go along with the theming of <a href=\"https:\/\/jasonsblog.ddns.net\/index.php\/2022\/12\/23\/allscan-for-allstarlink-and-hamvoip\/\" target=\"_blank\" rel=\"noreferrer noopener\">AllScan<\/a>. I&#8217;m no web coder and it&#8217;s only tested on Firefox which is all I run, and back up your files before you change them. And it turned out more files had colors defined instead of using the css file, so I added additional comments. I think this can be cleaned up quite a bit to just use the css file, but it will require a lot more work. But below are the changes I made to get most everything working. And I also have a <a href=\"https:\/\/jasonsblog.ddns.net\/index.php\/2025\/01\/05\/lsnodes-dark-mode-for-supermon-7-4\/\" target=\"_blank\" rel=\"noreferrer noopener\">post<\/a> on a dark mode for lsnodes as well.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"689\" src=\"https:\/\/jasonsblog.ddns.net\/wp-content\/uploads\/2025\/01\/image-5-1024x689.png\" alt=\"\" class=\"wp-image-10095\" srcset=\"https:\/\/jasonsblog.ddns.net\/wp-content\/uploads\/2025\/01\/image-5-1024x689.png 1024w, https:\/\/jasonsblog.ddns.net\/wp-content\/uploads\/2025\/01\/image-5-300x202.png 300w, https:\/\/jasonsblog.ddns.net\/wp-content\/uploads\/2025\/01\/image-5-768x517.png 768w, https:\/\/jasonsblog.ddns.net\/wp-content\/uploads\/2025\/01\/image-5.png 1367w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>For it to work you have to change the supermon.css file with small changes to a few other files.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#html, body {\n    background-color:hsl(240,25%,12%);\n}\na:link {\ncolor: yellow;\n}\na:visited {\ncolor: yellow;\n}\na:hover {\ncolor: white;\n} \n::-webkit-scrollbar {\nwidth:15px;\nheight:15px;\nbackground-color:#444;\n}\n::-webkit-scrollbar-thumb {\nbackground:gray;\nborder-radius:5px;\n}\nbody {\nmargin:5px auto 7px;\npadding:0 5px;\ncolor:rgb(200,195,188);\nmin-width:350px;\nmax-width:1800px;\n}\nbody, textarea, input, select {\nfont:13px\/1.25 Verdana,Arial,Helvetica,sans-serif;\n}\ninput&#91;type=text], input&#91;type=number], input&#91;type=password], select, textarea {\nbackground-color:hsl(240,50%,30%);\ncolor:#fff;\nmargin:1px 4px;\npadding:2px 4px;\nborder:2px;\n}\ninput&#91;type=button], input&#91;type=submit], input::file-selector-button {\ncolor:#fff;\nmargin:2px 1px;\nbackground-color:#444;\nborder-radius:3px;\n}\ninput&#91;type=button]:hover, input&#91;type=submit]:hover, input::file-selector-button:hover {\nbackground-color:#777;\n}\ninput.ctrl {\nfont-size:14px;\nline-height:1;\nvertical-align:middle;\npadding:1px;\n}\ninput&#91;type=number] {\n-moz-appearance:textfield;\n}\n\n.nodeNum {\n    margin: 5px;\n    cursor: pointer;\n}\n\n.nodeNum:hover {\n    font-weight: bold;\n    color: yellow;\n}\n\n#bubblechart {\n    font-size: 9.5px;\n}\n\n#lsnodeschart {\n    font-size: 9.5px;\n}\n\n#website {\n    font-size: 9.5px;\n}\n\n#header {\n    width: 100%;\n    position: relative;\n    margin: 1px 0px;\n    border-top-left-radius: 10px;\n    border-top-right-radius: 10px;\n\/* Background definitions are in global.inc - Do not change here *\/\n\/*    background-color: blue; *\/\n\/*    background-image: url(\"background.jpg\"); *\/\n\/*    height: 124px; *\/\n}\n\n#headerTitle {\n    position: absolute;\n    top: 3px;\n    left: 5px;\n    margin: 0px 0px;\n    font-weight: bold;\n    font-size: 1.1em;\n    color: white;\n    line-height: normal;\n    letter-spacing: normal;\n    font-family: \"Lucida Grande\", Lucida, Verdana, sans-serif;\n}\n\n#headerTitle a:link {\n    text-decoration: none;\n    color: white;\n}\n\n#headerTitle a:visited {\n    text-decoration: none;\n    color: white;\n}\n\n#headerTag {\n    position: absolute;\n    top: 58px;\n    left: 10px;\n    margin: 0px 0px;\n    color: white;\n    font-weight: bold;\n    font-size: 0.9em;\n    line-height: normal;\n    font-family: \"Lucida Grande\", Lucida, Verdana, sans-serif;\n    letter-spacing: normal;\n}\n\n#header2Tag {\n    position: absolute;\n    top: 103px;\n    left: 10px;\n    margin: 0px 0px;\n    font-size: 0.9em;\n    color: cyan;\n    font-weight: bold;\n    line-height: normal;\n    font-family: \"Lucida Grande\", Lucida, Verdana, sans-serif;\n    letter-spacing: normal;\n}\n\n#header3Tag {\n    position: absolute;\n    top: 54px;\n    left: 10px;\n    margin: 0px 0px;\n    font-size: 1.3em;\n    color: lightgreen;\n    font-weight: bold;\n    line-height: normal;\n    font-family: \"Lucida Grande\", Lucida, Verdana, sans-serif;\n    letter-spacing: normal;\n}\n\n#header4Tag {\n    position: absolute;\n    top: 54px;\n    left: 10px;\n    margin: 0px 0px;\n    font-size: 1.3em;\n    color: yellow;\n    font-weight: bold;\n    line-height: normal;\n    font-family: \"Lucida Grande\", Lucida, Verdana, sans-serif;\n    letter-spacing: normal;\n}\n\n#headerImg {\n    position: absolute;\n    top: 4px;\n    right: 12px;\n}\n\n#headerImg2{\n    position: absolute;\n    top: 4px;\n    right: 212px;\n}\n\n#mytilepic {\n    position: absolute;\n    top: 4px;\n    right: 128px;\n}\n\n#mytilepic2 {\n    position: absolute;\n    top: 4px;\n    right: 228px;\n}\n\n#headerLogin {\n    position: absolute;\n    top: 34px;\n    left: 11px;\n    font-size: 14px;\n    font-family: Verdana,Arial,sans-serif;\n    color: lightgray;\n}\n\n#headerLogin a:link {\n    text-decoration: none;\n    color: lightgray;    \n}\n\n#headerLogin a:visited {\n    text-decoration: none;\n    color: lightgray;\n}\n\n#headerLogin a:hover {\n    text-decoration: none;\n    font-size: 16px;\n    font-weight: bold;\n    color: yellow;\n}\n\n#menu {\n    position: relative;\n    width: 100%;\n    float: left;\n    padding: 0px 0px 0px 12px;\n    box-sizing: border-box;\n    border-bottom-left-radius: 10px;\n    border-bottom-right-radius: 10px;\n    background-color: maroon;\n    font-size: 15px;\n    font-family: Verdana,Arial,sans-serif;\n}\n\n#menu a {\n    display: block;\n    padding: 2px 8px 2px 2px;\n    text-decoration: none;\n    color: yellow;\n}\n\n#menu a:hover {\n    background: transparent;\n    font-weight: bold;\n}\n\n#menu a:active {\n}\n\n#menu a.active {\n    color: white;\n}\n\n#menu ul {\n    list-style-type: none;\n    margin: 0;\n    float: left;\n    padding: 1px 8px 2px 3px;\n    background-color: maroon;\n}\n\n#menu li {\n    float: left;\n}\n\n#menu li a, .dropbtn {\n    display: inline-block;\n    \/** color: white; **\/\n    text-align: center;\n    \/** padding: 14px 16px; **\/\n    text-decoration: none;\n}\n\n#menu li a:active {\n}\n\n#menu li a.active {\n    color: white;\n}\n\n#menu li.dropdown {\n    display: inline-block;\n}\n\n#menu .dropdown-content {\n    display: none;\n    position: absolute;\n    background-color: maroon;\n    min-width: 160px;\n    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n    z-index: 5;\n}\n\n#menu .dropdown-content a {\n    color: yellow;\n    padding: 1px 4px 4px 4px;\n    text-decoration: none;\n    display: block;\n    text-align: left;\n}\n\n#menu .dropdown-content a:hover {\n    background-color: maroon;\n    font-weight: bold;\n}\n\n#menu .dropdown:hover .dropdown-content {\n    display: block;\n}\n\n#footer {\n    font-size: 11px;\n}\n\ntable.rtcm {\n    border-collapse: collapse;\n    border: 1px solid black;\n    padding: 5px;\n    font-family: verdana,arial,sans-serif;\n}\n\ntable.rtcm tr {\n    font-size: 12px;\n}\n\ntable.rtcm td {\n    white-space: nowrap;\n}\n\ntable.rtcm th {\n    border: 1px solid black;\n    font-size: 12px;\n    padding: 5px;\n    background-color: #dedede;\n}\n\ntable.gridtable {\n    font-family: verdana,arial,sans-serif;\n    font-size: 12px;\n    color: black;\n    padding: 4px;\n    border-width: 1px;\n    border-color: ;\n    border-collapse: collapse;\n}\n\ntable.gridtable th {    \/* table header *\/\n    border-width: 1px;\n    padding: 4px;\n    border-style: solid;\n    border-color: slategray;\n    color: lightgray;\n    background-color: hsl(240,50%,30%);\n    font-size: 12px;\n}\n\ntable.gridtable td {    \/* connected stations not transmitting *\/\n    border-width: 1px;\n    padding: 4px;\n    border-style: solid;\n    border-color: slategray;\n    background-color: hsl(240,30%,15%);\n    color: lightgray;\n    font-size: 11px;\n}\n\ntable.gridtable tr.rColor td {     \/* connected node transmitting *\/\n    background-color: darkred;\n    font-weight: bold; \n    color: yellow;\n}\n\ntable.gridtable tr.cColor td {      \/* connecting to station *\/\n    background-color: navy;\n    font-weight: bold;\n    color: yellow;\n}\n\ntable.gridtable tr.bColor td {\n    background-color: palegreen;\n    font-weight: bold;\n    color: black;\n}\n\ntable.gridtable tr.gColor td {      \/* Idle *\/\n    background-color: hsl(120, 61%, 20%);\n    font-weight: bold;\n    color: lightgray;\n}\n\ntable.gridtable tr.tColor td {       \/* PTT Keyed *\/\n    background-color: darkred;\n    font-weight: bold;\n    color: lightgray;\n}\n\ntable.gridtable tr.lColor td {       \/* COS Receive *\/\n    background-color: green;\n    font-weight: bold;\n    color: lightgray;\n}\n\n.disconnect {\n    font-size: 14px;\n    text-align: left;\n}\n\n.text {\n    position: relative;\n    margin: 0px 0px 0px 10px;\n    width: 330px;\n    font-size: 14px;\n    text-align: left;\n}\n\n.barbox_a {\n    position: absolute;\n    top: 2px;\n    left: 10px;\n    margin: 0px 0px 0px 0px;\n    width: 302px;\n    height: 22px;\n    background-color: black;\n}\n\n.bar {\n    position: relative;\n    top: 1px;\n    left: 1px;\n    margin: 0px 0px 0px 0px;\n    width: 0px;\n    height: 20px;\n    background-color: #0099FF;\n    text-align: center;\n    color: white;\n}\n\n.per {\n    position: absolute;\n    top: 0px;\n    font-size: 12px;\n    left: 50%;\n    height: 20px;\n    margin: 0px 0px 0px 0px;\n    background-color: #0099FF;\n    color: white;\n}\n\n.blank {\n    background-color: white;\n    width: 300px;\n}\n\n#login {\n    display: none;\n}\n\n#login-header {\n    margin: 0 auto;\n    position: absolute;\n    right: 250px;\n}\n\n#login-link {\n    position: absolute;\n    top: 0px;\n    right: 0px;\n    display: block;\n    background: #2a2a2a;\n    padding: 5px 15px 5px 15px;\n    color: #FFF;\n}\n\n#login-panel {\n    position: absolute;\n    top: 26px;\n    right: 0px;\n    width: 200px;\n    padding: 10px 15px 5px 15px;\n    background: #2a2a2a;\n    font-size: 10pt;\n    font-weight: bold;\n    color: #FFF;\n    display: none;\n}\n\nlabel {\n    line-height: 1.8;\n}\n\n.clearer {\n    clear: both;\n}\n\n#cpMain {\n    display: none;\n}\n\n.submit {\n    background: lightgray;\n    padding: 3px 4px 4px 4px 1px;\n    color: black;\n}\n\n.submit:hover {\n    background: maroon;\n    font-weight: bold;\n    padding: 3px 4px 4px 4px 1px;\n    color: yellow;\n}\n\n.submit2 {\n    background: lightgray;\n    padding: 3px 4px 4px 4px 1px;\n    color: black;\n}\n\n.submit2:hover {\n    background: yellow;\n    font-weight: bold;\n    padding: 3px 4px 4px 4px 1px;\n    color: black;\n}\n\n<\/code><\/pre>\n\n\n\n<p>In link.php I had to change the background for the weather (hsl value).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Added WA3DSP Weather conditions\nif (isset($LOCALZIP)) {\n    $WX = exec(\"\/usr\/local\/sbin\/supermon\/weather.sh $LOCALZIP v\");\n    print \"&lt;p style=\\\"margin-top:0px;\\\"&gt;&#91; Weather conditions for $LOCATION - $LOCALZIP: \";\n    print \"&lt;span style=\\\"margin-top:0px; font-weight: bold; background-color:hsl(240,50%,30%);\\\"&gt;&amp;nbsp;$WX&amp;nbsp;&lt;\/span&gt; ]\";\n}\n<\/code><\/pre>\n\n\n\n<p>For the CPU temp I changed the colors in \/usr\/local\/sbin\/supermon\/gettemp. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if &#91; \"$FTEMP\" -le \"120\" ]; then\n    echo -en \"&lt;span style=\\\"background-color: darkgreen; color: white;\\\"&gt;\"\n elif &#91; \"$FTEMP\" -le \"150\" ]; then\n    echo -en \"&lt;span style=\\\"background-color: darkyellow; color: white;\\\"&gt;\"\n else\n    echo -en \"&lt;span style=\\\"font-weight: bold; color: yellow; background-color: darkred; color: white;\\\"&gt;\"\nfi<\/code><\/pre>\n\n\n\n<p>Fix Config editor, \/var\/www\/html\/supermon\/edit\/configeditor.php, change background color.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>print \"&lt;html&gt;\\n&lt;body style=\\\"background-color:hsl(240,25%,12%);\\\"&gt;\\n\";^M<\/code><\/pre>\n\n\n\n<p>Change \/var\/www\/html\/supermon\/node-ban-allow.php background color.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body style=\"background-color: hsl(240,25%,12%);\"&gt;<\/code><\/pre>\n\n\n\n<p>Change \/var\/www\/html\/suprmon\/database.php background color and font.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body style=\"background-color: hsl(240,25%,12%);color: lightgray;\"&gt;<\/code><\/pre>\n\n\n\n<p>If you want, change the background and font in \/var\/www\/html\/supermon\/astlookup.css.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style type=\"text\/css\"&gt;\n\nhtml { \n        background-color: hsl(240,25%,12%);\n        color: lightgray;\n        font-size: 12px;\n        font-family: New Courier;\n        text-align: left;\n}\n\nbody {\n        background-color: hsl(240,25%,12%);\n        color: lightgray;\n        font-size: 12px;\n        font-family: New Courier;\n        text-align: left;\n}\n\ntable {\n        background-color: hsl(240,25%,12%);\n        color: lightgray;\n        font-size: 12px;\n        padding: 2px;\n        margin: 2px;\n        border-style: groove;\n        border-width: 0px;\n        font-family: New Courier;\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>Change background in \/var\/www\/html\/supermon\/display-config.php.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body style=\"background-color: hsl(240,25%,12%);\"&gt;<\/code><\/pre>\n\n\n\n<p>For some of the other log lookup php scripts I added the following statement to use the astlookup.css file.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"astlookup.css\" \/&gt;<\/code><\/pre>\n\n\n\n<p>I might go back and try to clean up a lot of these files and make this all much simpler. And maybe do a redesign of the main screen. Also, I believe I covered all my changes, but if I missed something you can email me from my QRZ page email address and I can add it here.<\/p>\n\n\n\n<p><strong>Bonus Tip: <\/strong>If you want to get rid of the disconnect confirmation, edit the \/var\/www\/html\/supermon\/header.inc file and search for disconnect. Then look for the r = statement, comment out the confirmation dialog below (\/\/) and input the true. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"130\" src=\"https:\/\/jasonsblog.ddns.net\/wp-content\/uploads\/2025\/01\/image-12.png\" alt=\"\" class=\"wp-image-10179\" srcset=\"https:\/\/jasonsblog.ddns.net\/wp-content\/uploads\/2025\/01\/image-12.png 660w, https:\/\/jasonsblog.ddns.net\/wp-content\/uploads\/2025\/01\/image-12-300x59.png 300w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>There is room for improvement, but I tried to comment what I could figure out and mirrored a dark mode to go along with the theming of AllScan. I&#8217;m no web coder and it&#8217;s only tested on Firefox which is all I run, and back up your files before you change them. And it turned [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-10063","post","type-post","status-publish","format-standard","hentry","category-ham"],"blocksy_meta":[],"featured_image_src":null,"author_info":{"display_name":"Jason","author_link":"https:\/\/jasonsblog.ddns.net\/index.php\/author\/jturning\/"},"_links":{"self":[{"href":"https:\/\/jasonsblog.ddns.net\/index.php\/wp-json\/wp\/v2\/posts\/10063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jasonsblog.ddns.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jasonsblog.ddns.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jasonsblog.ddns.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jasonsblog.ddns.net\/index.php\/wp-json\/wp\/v2\/comments?post=10063"}],"version-history":[{"count":19,"href":"https:\/\/jasonsblog.ddns.net\/index.php\/wp-json\/wp\/v2\/posts\/10063\/revisions"}],"predecessor-version":[{"id":10180,"href":"https:\/\/jasonsblog.ddns.net\/index.php\/wp-json\/wp\/v2\/posts\/10063\/revisions\/10180"}],"wp:attachment":[{"href":"https:\/\/jasonsblog.ddns.net\/index.php\/wp-json\/wp\/v2\/media?parent=10063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jasonsblog.ddns.net\/index.php\/wp-json\/wp\/v2\/categories?post=10063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jasonsblog.ddns.net\/index.php\/wp-json\/wp\/v2\/tags?post=10063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}