El 19/02/2010 9:24, j0ey escribió:
1. Main-View:
http://j0ey.de/pub/nocview/2.jpg
2. Mouse-Roll-Over for "handled services":
http://j0ey.de/pub/nocview/3.jpg
If you are interested, i can send you the code.
Thanks for sharing! I set it up, and it worked like a charm. Just did a
little style tweaking... which I share back. It's not much, just making
it less black.
<style> /* {{{ */
body { /* {{{ */
background-color: #FFFFFF;
color: #fff;
margin-left: 10px;
margin-right: 15px;
}
.host {
width: 100%;
margin-top: 10px;
border: 2px solid #666;
background-color: #101010;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
font-family: Arial;
}
.hostname {
font-weight: bold;
font-family: Helvetica;
font-size: x-large;
margin-left: 5px;
float: left;
color: #CCC;
cursor: pointer;
width: 100%;
}
.services {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background-color: #CCCCCC;
}
.warning {
padding: 3px;
overflow: hidden;
border-top: 2px solid #1f2223;
}
.critical {
padding: 3px;
overflow: hidden;
border-top: 2px solid #1f2223;
}
.unknown {
padding: 3px;
border-top: 2px solid #1f2223;
overflow: hidden;
}
.ok {
padding: 3px;
border-top: 2px solid #1f2223;
overflow: hidden;
}
.servicename, .duration, .attempt, .lastcheck, .output {
float: left;
font-family: Helvetica;
padding: 3px;
width: 100%;
color: #000000;
max-height: 6em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.servicename {
cursor: pointer;
width: 300px;
color: #CCCCCC;
}
.warning .servicename {
font-weight: bold;
background-color: #948500;
}
.critical .servicename {
font-weight: bold;
background-color: #953232;
}
.unknown .servicename {
font-weight: bold;
color: #bbb;
background-color: #615d00;
}
.ok .servicename {
font-weight: bold;
color: #ccc;
background-color: #005d00;
}
.duration {
width: 10em;
text-align: center;
font-weight: bold;
color: #000000;
}
.attempt {
padding-right: 2em;
width: auto;
font-weight: bold;
color: #ccc;
}
.lastcheck {
width: 10em;
color: #aaa;
}
.output {
width: 40em;
font-weight: bold;
color: #000000;
overflow: hidden;
}
#log { }
.clearboth { clear: both; }
#handled, #unhandled {
float: right;
font-weight: bold;
font-size: x-large;
font-family: monospace !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding-right: 2px;
padding-left: 2px;
margin-right: 3em;
margin-top: 2px;
margin-bottom: 2px;
}
#datetime, #hours, #minutes, #colon {
font-size: x-large;
font-weight: bold;
font-family: monospace !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
float: left;
}
#hours, #minutes {
background-color: #7F5917;
padding-left: 3px;
padding-right: 3px;
}
#datetime {
margin-left: 3em;
}
#handled {
background-color: #4E6F4C;
}
#unhandled {
background-color: #6F455A;
}
.hostlink a {
color: #444;
font-weight: normal;
text-decoration: none;
}
.hostlink a:hover {
font-weight: bolder;
color: #bbb;
cursor: pointer;
}
#error {
position: absolute;
padding: 30px;
top: 45%;
font-size: 30px;
text-align: center;
font-weight: bolder;
font-family: Helvetica !important;
color: black;
z-index: 30;
background-color: #ddd;
border: 10px solid #444;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
#overlay {
background-color: #aaa;
position: fixed;
top: 0px;
left: 0px;
opacity: 0.5;
z-index: 10;
} /* }}} */
#stats { /* {{{ */
position: fixed;
bottom: 0px;
left: 33%;
padding-bottom: 3px;
background-color: #CCCCCC;
border-top: 2px solid #444;
border-left: 2px solid #444;
border-right: 2px solid #444;
-moz-border-radius-topleft: 8px;
-webkit-border-radius-topright: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-radius-topleft: 8px;
}
#statcounter {
font-family: Helvetica;
list-style-type: none;
display: inline;
font-size: 12px;
color: #000000;
padding-top: 5px;
padding-right: 15px;
padding-left: 15px;
padding-bottom: 1px;
}
#statcounter li {
display: inline;
}
#shostcounter, #shandledsvccounter, #sunhandledsvccounter {
font-family: monospace;
font-weight: bold;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
padding-left: 3px;
padding-right: 3px;
}
#shostcounter {
background-color: #953232;
border: 1px solid #ff5555;
margin-left: 5px;
}
#shandledsvccounter {
background-color: #238876;
border: 1px solid #29c38a;
margin-left: 15px;
}
#sunhandledsvccounter {
background-color: #948500;
border: 1px solid #e7c922;
margin-left: 15px;
}
dl.popup {
margin: 0;
max-width: 50em;
padding: 0;
}
.popup dt {
border-top: 1px dotted #555;
min-width: 15em;
color: #ccc;
}
dt { clear: both; }
.popup dd {
color: #ddd;
}
.tooltip {
position: fixed;
display: none;
background-color: #FFFFFF;
}
#shandledsvcdiv {
border: 1px solid #555;
background-color: #222;
color: #ddd;
font-size: small;
font-weight: bold;
font-family: Helvetica;
padding: 4px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#shandledsvcdescr {
cursor: pointer;
}
.hostdown {
list-style-type: none;
display: inline;
}
.hostdown li {
display: inline;
}
.hdn {
background-color: #ac3737;
margin-left: -5px;
padding-left: 5px;
display: block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
width: 305px;
float: left;
}
.hdd {
display: block;
font-size: large;
font-weight: bold;
text-align: center;
width: 10em;
}
.hdo {
padding-left: 75px;
font-size: small;
font-weight: normal;
width: 40em;
} /* }}} */
#idle {
font-size: 40px;
text-align: center;
color: #aaa;
}
.atp {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border: 1px solid #999;
background-color: #111;
margin-left: 2px;
}
</style>
Cheers,
Jose Luis Martinez
[email protected]
_______________________________________________
Opsview-users mailing list
[email protected]
http://lists.opsview.org/lists/listinfo/opsview-users
