教程哪吒探针美化显示主机基本配置

       哪吒探针是一个开源、轻量的服务器和网站监控、运维工具。
       支持一键脚本安装面板和监控服务，轻松使用；Linux、Windows、MacOS、OpenWRT等主流系统均受支持。

哪吒探针

前言

       支持同时监控多个服务器的系统状态，支持监控网页、端口、SSL证书状态；支持故障、流量等状态报警，支持多种通知方式（Telegram、邮件、微信等）。
       支持在线SSH，支持流量循环监控，支持设置定时任务、服务器批量执行任务。

一、美化前提

       前提是已经安装了哪吒探针服务端，并运行正常。

二、美化步骤

1.找到docker目录替换文件

目录路径是：

/var/lib/docker/overlay2/这一段是随机的大约是第3、4个目录/merged/dashboard/resource/template

目录中的template路径下的theme-default文件：

哪吒探针美化文件

2.重启哪吒服务端

查看哪吒探针的PID：

docker ps

重启哪吒探针：

docker restart PIDXXXXXXXX

3.更改默认主题自定义样式

1.  
    
2.  
   /* 屏幕适配 */
3.  
   @media only screen and (min-width: 1200px) {
4.  
   .ui.container {
5.  
   width: 80% !important;
6.  
   }
7.  
   }
8.  
    
9.  
   @media only screen and (max-width: 767px) {
10.  
    .ui.card>.content>.header:not(.ui), .ui.cards>.card>.content>.header:not(.ui) {
11.  
    margin-top: 0.4em !important;
12.  
    }
13.  
    }
14.  
     
15.  
    /* 整体图标 */
16.  
    i.icon {
17.  
    color: #000;
18.  
    width: 1.2em !important;
19.  
    }
20.  
     
21.  
    /* 背景图片 */
22.  
    body {
23.  
    content: " " !important;
24.  
    background: fixed !important;
25.  
    z-index: -1 !important;
26.  
    top: 0 !important;
27.  
    right: 0 !important;
28.  
    bottom: 0 !important;
29.  
    left: 0 !important;
30.  
    background-position: top !important;
31.  
    background-repeat: no-repeat !important;
32.  
    background-size: cover !important;
33.  
    background-image: url(https://dimg04.c-ctrip.com/images/0103t12000arv3mjaA334.jpg) !important;
34.  
    font-family: Arial,Helvetica,sans-serif !important;
35.  
    }
36.  
     
37.  
    /* 导航栏 */
38.  
    .ui.large.menu {
39.  
    border: 0 !important;
40.  
    border-radius: 0px !important;
41.  
    background-color: rgba(255, 255, 255, 55%) !important;
42.  
    }
43.  
     
44.  
    /* 首页按钮 */
45.  
    .ui.menu .active.item {
46.  
    background-color: transparent !important;
47.  
    }
48.  
     
49.  
    /* 导航栏下拉框 */
50.  
    .ui.dropdown .menu {
51.  
    border: 0 !important;
52.  
    border-radius: 0 !important;
53.  
    background-color: rgba(255, 255, 255, 80%) !important;
54.  
    }
55.  
     
56.  
    /* 登陆按钮 */
57.  
    .nezha-primary-btn {
58.  
    background-color: transparent !important;
59.  
    color: #000 !important;
60.  
    }
61.  
     
62.  
    /* 大卡片 */
63.  
    #app .ui.fluid.accordion {
64.  
    background-color: #fbfbfb26 !important;
65.  
    border-radius: 0.4rem !important;
66.  
    }
67.  
     
68.  
    /* 小卡片 */
69.  
    .ui.four.cards>.card {
70.  
    border-radius: 0.6rem !important;
71.  
    background-color: #fafafaa3 !important;
72.  
    }
73.  
     
74.  
    .status.cards .wide.column {
75.  
    padding-top: 0 !important;
76.  
    padding-bottom: 0 !important;
77.  
    height: 3.3rem !important;
78.  
    }
79.  
     
80.  
    .status.cards .three.wide.column {
81.  
    padding-right: 0rem !important;
82.  
    }
83.  
     
84.  
    .status.cards .wide.column:nth-child(1) {
85.  
    margin-top: 2rem !important;
86.  
    }
87.  
     
88.  
    .status.cards .wide.column:nth-child(2) {
89.  
    margin-top: 2rem !important;
90.  
    }
91.  
     
92.  
    .status.cards .description {
93.  
    padding-bottom: 0 !important;
94.  
    }
95.  
     
96.  
    /* 小鸡名 */
97.  
    .status.cards .flag {
98.  
    margin-right: 0.5rem !important;
99.  
    }
100.  
      
101.  
     /* 弹出卡片图标 */
102.  
     .status.cards .header > .info.icon {
103.  
     margin-right: 0 !important;
104.  
     }
105.  
      
106.  
     .nezha-secondary-font {
107.  
     color: #21ba45 !important;
108.  
     }
109.  
      
110.  
     /* 进度条 */
111.  
     .ui.progress {
112.  
     border-radius: 50rem !important;
113.  
     }
114.  
     .ui.progress .bar {
115.  
     min-width: 1.8em !important;
116.  
     border-radius: 15px !important;
117.  
     line-height: 1.65em !important;
118.  
     color:black
119.  
     }
120.  
     .ui.fine.progress> .bar {
121.  
     background-color: #ba45ac !important;
122.  
     }
123.  
     .ui.progress> .bar {
124.  
     background-color: #000 !important;
125.  
     }
126.  
      
127.  
     .ui.progress.fine .bar {
128.  
     background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);!important;
129.  
     }
130.  
      
131.  
     .ui.progress.warning .bar {
132.  
     background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%); !important;
133.  
     }
134.  
      
135.  
     .ui.progress.error .bar {
136.  
     background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);important;
137.  
     }
138.  
      
139.  
     .ui.progress.offline .bar {
140.  
     background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%); !important;
141.  
     }
142.  
      
143.  
     /* 上传下载 */
144.  
     .status.cards .outline.icon {
145.  
     margin-right: 1px !important;
146.  
     }
147.  
      
148.  
     i.arrow.alternate.circle.down.outline.icon {
149.  
     color: #21ba45 !important;
150.  
     }
151.  
      
152.  
     i.arrow.alternate.circle.up.outline.icon {
153.  
     color: red !important;
154.  
     }
155.  
      
156.  
     /* 弹出卡片小箭头 */
157.  
     .ui.right.center.popup {
158.  
     margin: -3px 0 0 0.914286em !important;
159.  
     -webkit-transform-origin: left 50% !important;
160.  
     transform-origin: left 50% !important;
161.  
     }
162.  
      
163.  
     .ui.bottom.left.popup {
164.  
     margin-left: 1px !important;
165.  
     margin-top: 3px !important;
166.  
     }
167.  
      
168.  
     .ui.top.left.popup {
169.  
     margin-left: 0 !important;
170.  
     margin-bottom: 10px !important;
171.  
     }
172.  
      
173.  
     .ui.top.right.popup {
174.  
     margin-right: 0 !important;
175.  
     margin-bottom: 8px !important;
176.  
     }
177.  
      
178.  
     .ui.left.center.popup {
179.  
     margin: -3px .91428571em 0 0 !important;
180.  
     -webkit-transform-origin: right 50% !important;
181.  
     transform-origin: right 50% !important;
182.  
     }
183.  
      
184.  
     .ui.right.center.popup:before,
185.  
     .ui.left.center.popup:before {
186.  
     border: 0px solid #fafafaeb !important;
187.  
     background: #fafafaeb !important;
188.  
     }
189.  
     .ui.top.popup:before {
190.  
     border-color: #fafafaeb transparent transparent !important;
191.  
     }
192.  
      
193.  
     .ui.popup:before {
194.  
     border-color: #fafafaeb transparent transparent !important;
195.  
     }
196.  
      
197.  
     .ui.bottom.left.popup:before {
198.  
     border-radius: 0 !important;
199.  
     border: 1px solid transparent !important;
200.  
     border-color: #fafafaeb transparent transparent !important;
201.  
     background: #fafafaeb !important;
202.  
     -webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
203.  
     box-shadow: 0px 0px 0 0 #fafafaeb !important;
204.  
     -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
205.  
     }
206.  
      
207.  
     .ui.bottom.right.popup:before {
208.  
     border-radius: 0 !important;
209.  
     border: 1px solid transparent !important;
210.  
     border-color: #fafafaeb transparent transparent !important;
211.  
     background: #fafafaeb !important
212.  
     -webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
213.  
     box-shadow: 0px 0px 0 0 #fafafaeb !important;
214.  
     -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
215.  
     }
216.  
      
217.  
     .ui.top.left.popup:before {
218.  
     border-radius: 0 !important;
219.  
     border: 1px solid transparent !important;
220.  
     border-color: #fafafaeb transparent transparent !important;
221.  
     background: #fafafaeb !important;
222.  
     -webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
223.  
     box-shadow: 0px 0px 0 0 #fafafaeb !important;
224.  
     -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
225.  
     }
226.  
      
227.  
     .ui.top.right.popup:before {
228.  
     border-radius: 0 !important;
229.  
     border: 1px solid transparent !important;
230.  
     border-color: #fafafaeb transparent transparent !important;
231.  
     background: #fafafaeb !important;
232.  
     -webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
233.  
     box-shadow: 0px 0px 0 0 #fafafaeb !important;
234.  
     -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
235.  
     }
236.  
      
237.  
     .ui.left.center.popup:before {
238.  
     border-radius: 0 !important;
239.  
     border: 1px solid transparent !important;
240.  
     border-color: #fafafaeb transparent transparent !important;
241.  
     background: #fafafaeb !important;
242.  
     -webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
243.  
     box-shadow: 0px 0px 0 0 #fafafaeb !important;
244.  
     -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
245.  
     }
246.  
      
247.  
     /* 弹出卡片 */
248.  
     .status.cards .ui.content.popup {
249.  
     min-width: 20rem !important;
250.  
     line-height: 2rem !important;
251.  
     border-radius: 5px !important;
252.  
     border: 1px solid transparent !important;
253.  
     background-color: #fafafaeb !important;
254.  
     font-family: Arial,Helvetica,sans-serif !important;
255.  
     }
256.  
      
257.  
     .ui.content {
258.  
     margin: 0 !important;
259.  
     padding: 1em !important;
260.  
     }
261.  
      
262.  
     /* 服务页 */
263.  
     .ui.table {
264.  
     background: RGB(225,225,225,0.6) !important;
265.  
     }
266.  
      
267.  
     .ui.table thead th {
268.  
     background: transparent !important;
269.  
     }
270.  
      
271.  
     /* 服务页进度条 */
272.  
      
273.  
     /* 版权 */
274.  
     .ui.inverted.segment, .ui.primary.inverted.segment {
275.  
     color: #000 !important;
276.  
     font-weight: bold !important;
277.  
     background-color: #fafafaa3 !important;
278.  
     }
279.  
      
280.  
      
281.  
      
282.  
     window.onload = function(){
283.  
     var avatar=document.querySelector(".item img")
284.  
     var footer=document.querySelector("div.is-size-7")
285.  
     document.querySelector("[rel='shortcut icon']").href = "https://picbed.qunarzz.com/08457d3bda3f8d525b4e68a1849128df.png"
286.  
     footer.innerHTML="Copyright © 2023 All Rights Reserved."
287.  
     footer.style.visibility="visible"
288.  
     avatar.src="https://blog.csdn.net/weixin_47386918/article/details/https://picbed.qunarzz.com/08457d3bda3f8d525b4e68a1849128df.png"
289.  
     avatar.style.visibility="visible"
290.  
     }
291.  
      

设置保存后即可。

这篇好文章是转载于：学新通技术网