layout updates

git-svn-id: http://www.observium.org/svn/observer/trunk@2417 61d68cd4-352d-0410-923a-c4978735b2b8

html/css/styles.css

@@ -2,7 +2,14 @@ body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   margin: 0px;
   padding: 0px 0px 0px 0px;
-    background-color: #fff;
+  background: rgb(249,249,249); /* Old browsers */
+  background: -moz-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(255,255,255,1) 100%); /* Opera11.10+ */
+  background: -ms-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
+  background: linear-gradient(top, rgba(249,249,249,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
   color: #666;
   font-size: 10pt;
   line-height: 20px;
@@ -502,13 +509,13 @@ a:active { color: #00f; }
 
 .vspace { margin-top: 4px; margin-bottom: 4px; }
 p.vspace { padding-top: 3px; padding-bottom: 3px; }
-.content-mat { padding: 0px; margin: auto; background: none; }
+.content-mat { padding: 0px; margin: auto; }
 
 .clearer { clear: both; display: block; padding: 0px; height: 0px; line-height: 1px; font-size: 0px; }
 
 .borderless-table tr td { border: none }
 
-#header { width: 100%; margin: 0px 0px 0px 0px; background-color: #fff; }
+#header { width: 100%; margin: 0px 0px 0px 0px; bbackground-color: #fff; }
 #header #page-title { color: #555; font: 18pt Arial; font-weight: bold; }
 #header #page-subtitle { color: #555; font: 12pt Arial; font-weight: bold; }
 #header a { color: #eeeeee; }
@@ -1018,22 +1025,23 @@ color: #cc0000;
     list-style:none;  
     padding:0;  
     margin:0 0 12px 0; 
+    width: 100%;
 }  
 #menium li ul li {  
     font-size:12px;  
     line-height:24px;  
     position:relative;  
-    #text-shadow: 1px 1px 1px #ffffff;  
-    padding:0;  
+    text-shadow: 1px 1px 1px #ffffff;  
+    padding:1px;  
     margin:0;  
     float:none;  
     text-align:left;  
-    width:130px;  
+    width: 100%; 
 }  
 #menium li ul li:hover {  
-    background:none;  
+    background: #F4F4F4;  
     border:none;  
-    padding:0;  
+    padding:1px;  
     margin:0;  
 }  
 #menium li .greybox li {  
@@ -1054,3 +1062,70 @@ color: #cc0000;
     padding:4px 6px 4px 6px;  
     margin:0px 0px 4px 0px;  
 }  
+
+
+/* Header
+-----------------------------------------------------------------------------*/
+/* gumax-header */
+#gumax-header {
+    /* border: 1px solid #000; /*debuging*/
+    position: relative;
+    z-index: 100;  /* make logo visible over content*/
+    min-height: 100px;  /* height of header */
+    height: 102px;  /* need for IE */
+    margin: 0 auto;
+    padding: 0;
+}
+
+/* Login
+-----------------------------------------------------------------------------*/
+#gumax-p-login {
+    /* border: 1px solid #000; /*debuging*/
+    font-size: 90%;
+    margin: 0; padding: 7px 0 5px 0;
+    text-align: right;
+}
+
+#gumax-p-login ul {
+    position: relative;
+    width: auto;
+    list-style: none;
+    padding: 0; margin: 0;
+}
+
+#gumax-p-login ul li {
+    position: relative;
+    display: inline;
+    margin: 0; padding: 0;
+    font-size: 100%;
+}
+
+#gumax-p-login ul li a {
+    color: #777;
+    padding: 2px 0 2px 10px;
+    text-decoration: none;
+}
+
+#gumax-p-login ul li a:hover { color: #333; }
+
+/* Logo
+-----------------------------------------------------------------------------*/
+#p-logo,
+#p-logo a,
+#p-logo a:hover {
+    /* border: 1px solid #000; /*debuging*/
+    width: 350px;
+    height: 96px;
+}
+#p-logo {
+    z-index: 200; position: absolute;
+    top: 00px; left: 0px; /* logo position */
+    overflow: visible;
+}
+#p-logo h5 { display: none; }
+#p-logo a, #p-logo a:hover {
+    display: block;
+    background-repeat: no-repeat;
+    background-position: center left !important;
+    text-decoration: none;
+}

html/includes/header.inc.php

@@ -1,8 +1,14 @@
-    <div id="top" style="background: <?php echo($config['header_color']); ?>;">
-      <table cellpadding="0" cellspacing="0" width="100%">
-        <tr>
-          <td align="left"></td>
-          <td align="right">
+<div id="gumax-header">
+  <div id="gumax-p-logo">
+    <div id="p-logo">
+      <a style="background-image: url('images/observium-logo.png');" accesskey="z"></a>
+    </div>
+    <script type="text/javascript"> if (window.isMSIE55) fixalpha(); </script>
+  </div>
+  <!-- end of gumax-p-logo -->
+
+  <!-- Login Tools -->
+  <div id="gumax-p-login">
 
 <?php
 if($_SESSION['widescreen'] === 1){
@@ -23,19 +29,11 @@ if ($_SESSION['authenticated'])
 
 if (Net_IPv6::checkIPv6($_SERVER['REMOTE_ADDR'])) { echo(" via <b>IPv6</b>"); } else { echo(" via <b>IPv4</b>"); }
 ?>
-          </td>
-        </tr>
-      </table>
-    </div>
 
-    <div id="header" style="border: 1px none #ccf;">
-      <table width="100%" style="padding: 0px; margin:0px;">
-        <tr>
-          <td style="padding: 0px; margin:0px; border: none;">
-            <div id="logo" style="padding: 10px"><a href="index.php"><img src="<?php echo($config['title_image']); ?>" alt="Logo" border="0" /></a></div>
-          </td>
-          <td align="right" style="margin-right: 10px;">
-            <div id="topnav" style="float: right;">
+  </div>
+  <div style="float: right;">
+
+
 <?php
 if (isset($_SESSION['authenticated']) && $_SESSION['authenticated'])
 {
@@ -43,7 +41,9 @@ if (isset($_SESSION['authenticated']) && $_SESSION['authenticated'])
 }
 ?>
   </div>
-          </td>
-        </tr>
-      </table>
 </div>
+
+	<!-- ///// end of gumax-header ///// -->
+
+
+

html/includes/topnav.inc.php

@@ -46,10 +46,10 @@ if ($services['down']) { $services['bgcolour'] = "#ffcccc"; } else { $services['
 
 ?>
 
-<table cellpadding="2" cellspacing="0" border="0">
+<table cellpadding="1" cellspacing="0" border="0" width=400>
   <tr style="background-color: <?php echo($devices[bgcolour]); ?>">
     <td width="5"></td>
-    <td>Devices : </td>
+    <td><strong>Devices</strong></td>
     <td><?php echo($devices['count']) ?></td>
     <td> ( </td>
     <td style="text-align: right"><span class="green"> <?php echo($devices['up']) ?> up</span></td>
@@ -60,7 +60,8 @@ if ($services['down']) { $services['bgcolour'] = "#ffcccc"; } else { $services['
     <td width="5"></td>
   </tr>
   <tr style="background-color: <?php echo($ports['bgcolour']) ?>">
-      <td width="5"></td><td>Ports : </td>
+      <td width="5"></td>
+      <td><strong>Ports</strong></td>
     <td><?php echo($ports['count']) ?></td>
     <td> ( </td>
     <td style="text-align: right"><span class="green"> <?php echo($ports['up']) ?> up </span></td>
@@ -73,7 +74,7 @@ if ($services['down']) { $services['bgcolour'] = "#ffcccc"; } else { $services['
 <?php if ($config['show_services']) { ?>
   <tr style="background-color: <?php echo($services['bgcolour']) ?>">
     <td width="5"></td>
-    <td>Services : </td>
+    <td><strong>Services</strong></td>
     <td><?php echo($services['count']) ?></td>
     <td> ( </td>
     <td style="text-align: right"><span class="green"><?php echo($services['up']) ?> up</span></td>