docs: switch to new website banner

Use a dark banner whose color matches the dark green used in the logo. Introduce a newly rendered version of the header logo derived from new SVG file, instead of old one from (now lost) Adobe Illustrator file. The top banner logo now links to the front page as is common practice for most websites. Signed-off-by: N Daniel P. Berrange <berrange@redhat.com>

docs: switch to new website banner
Use a dark banner whose color matches the dark green used in the logo. Introduce a newly rendered version of the header logo derived from new SVG file, instead of old one from (now lost) Adobe Illustrator file. The top banner logo now links to the front page as is common practice for most websites. Signed-off-by: N Daniel P. Berrange <berrange@redhat.com>
2d35438b · Daniel P. Berrange · 8c6e2867 · 2d35438b · 8c6e2867 · 8c6e2867
6 changed file
--- a/docs/Makefile.am
+++ b/docs/Makefile.am
@@ -85,8 +85,6 @@ logofiles = \

 png = \
  32favicon.png \
-  libvirt-header-bg.png \
-  libvirt-header-logo.png \
  libvirtLogo.png \
  libvirt-net-logical.png \
  libvirt-net-physical.png \

--- a/docs/libvirt-header-bg.png
+++ b/docs/libvirt-header-bg.png
--- a/docs/libvirt-header-logo.png
+++ b/docs/libvirt-header-logo.png
--- a/docs/libvirt.css
+++ b/docs/libvirt.css
@@ -2,12 +2,66 @@ h1, h2, h3, h4, h5, h6 {
    color: #3c857c;
 }

-#header {
-    margin: 0px;
-    height: 104px;
+#nav {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    height: 100px;
+    background: rgb(0, 95, 97);
+    border-bottom: 3px solid rgb(60, 133, 124);
    width: 100%;
-    background: url(libvirt-header-bg.png);
+    display: table;
+}
+
+#home {
+    background-image: url(logos/logo-banner-light-256.png);
+    background-repeat: no-repeat;
+    background-position: left center;
+    height: 100px;
+    width: 269px;
+    margin-left: 1em;
+    text-indent: 100%; white-space: nowrap; overflow: hidden;
+}
+
+#home a {
+    color:  rgb(0, 95, 97);
+    height: 100px;
+    width: 269px;
+    display: block;
+}
+
+#search {
+    display: table-cell;
+    vertical-align: middle;
+    width: 20em;
+    text-align: right;
+    padding: 1em;
+}
+
+#search input {
    border: 0px;
+    height: 2em;
+}
+
+#search input[type=text] {
+    background: rgb(230, 230, 230);
+    color: rgb(0, 0, 0);
+    width: 10em;
+    padding: 0px;
+    padding-left: 2px;
+    padding-right: 2px;
+}
+
+#search input[type=submit] {
+    background: rgb(60, 133, 124);
+    color: rgb(255, 255, 255);
+    width: 3em;
+    font-weight: bold;
+}
+
+#search input[type=submit]:active,
+#search input[type=submit]:hover {
+    color: rgb(255, 230, 0);
 }

 #body {
@@ -16,6 +70,7 @@ h1, h2, h3, h4, h5, h6 {
    border: 0px;
    left: 0px;
    margin: 0px;
+    margin-top: 120px;
 }

 #content {
@@ -96,39 +151,6 @@ h1, h2, h3, h4, h5, h6 {
    padding-left: 3em;
 }

-#headerLogo {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    height: 104px;
-    width: 400px;
-    background: url(libvirt-header-logo.png);
-}
-
-#headerSearch {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    padding: 2em;
-    z-index: 10;
-}
-
-#headerSearch input {
-    border: 1px solid #999999;
-    color: #999999;
-    background: white;
-    padding: 3px;
-    font-size: 1em;
-}
-
-#headerSearch #submit {
-    border: 1px solid #999999;
-    background: #eeeeee;
-    color: black;
-    padding: 3px;
-    font-size: 1em;
-}
-
 #sitemap ul li {
    list-style: none;
 }

--- a/docs/page.xsl
+++ b/docs/page.xsl
@@ -141,17 +141,6 @@
        <meta name="description" content="libvirt, virtualization, virtualization API"/>
      </head>
      <body>
-        <div id="header">
-          <div id="headerLogo"/>
-          <div id="headerSearch">
-            <form action="{$href_base}search.php" enctype="application/x-www-form-urlencoded" method="get">
-              <div>
-                <input id="query" name="query" type="text" size="12" value=""/>
-                <input id="submit" name="submit" type="submit" value="Search"/>
-              </div>
-            </form>
-          </div>
-        </div>
        <div id="body">
          <div id="menu">
            <xsl:apply-templates select="exsl:node-set($sitemap)/html:ul" mode="menu">
@@ -163,6 +152,19 @@
            <xsl:apply-templates select="/html:html/html:body/*" mode="content"/>
          </div>
        </div>
+        <div id="nav">
+          <div id="home">
+            <a href="{$href_base}index.html">Home</a>
+          </div>
+          <div id="search">
+            <form action="{$href_base}search.php" enctype="application/x-www-form-urlencoded" method="get">
+              <div>
+                <input name="query" type="text" size="12" value=""/>
+                <input name="submit" type="submit" value="Go"/>
+              </div>
+            </form>
+          </div>
+        </div>
      </body>
    </html>
  </xsl:template>

--- a/docs/sitemap.html.in
+++ b/docs/sitemap.html.in
@@ -6,10 +6,6 @@

    <div id="sitemap">
    <ul>
-      <li>
-        <a href="index.html">Home</a>
-        <span>Front page of the libvirt website</span>
-      </li>
      <li>
        <a href="news.html">News</a>
        <span>Details of new features and bugs fixed in each release</span>