TPAC: Simple CSS gradients for the header/footer

Firefox, Safari, Chrome, Opera, and the Android browser support
gradients. Use them. iOS 5 will support gradients. IE does not,
naturally, but support is promised for IE 10.

Including better IE support.

Signed-off-by: Dan Scott <dscott@laurentian.ca>
Signed-off-by: Lebbeous Fogle-Weekley <lebbeous@esilibrary.com>

diff --git a/Open-ILS/src/templates/opac/parts/footer.tt2 b/Open-ILS/src/templates/opac/parts/footer.tt2
index 0443b97..e2fe842 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/footer.tt2
+++ b/Open-ILS/src/templates/opac/parts/footer.tt2
@@ -2,6 +2,7 @@
     USE CGI = CGI_utf8;
     hostname = CGI.url({'-base' => 1});
 -%]
+<div id="footer-wrap">
 <div id="footer">
     <a href="[% hostname %]">[% l('Dynamic catalog') %]</a> &nbsp;|&nbsp;
     <a href="http://example.com">[% l('Bottom Link 2') %]</a> &nbsp;|&nbsp;
@@ -22,4 +23,4 @@
         </a>
     </div>
 </div>
-
+</div>

diff --git a/Open-ILS/src/templates/opac/parts/topnav.tt2 b/Open-ILS/src/templates/opac/parts/topnav.tt2
index 92ee814..bdb9d54 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/topnav.tt2
+++ b/Open-ILS/src/templates/opac/parts/topnav.tt2
@@ -1,4 +1,5 @@
 [% IF !ctx.is_staff %]
+<div id="header-wrap">
 <div id="header">
     <div class="float-left">
         [% INCLUDE "opac/parts/topnav_logo.tt2" %]
@@ -94,5 +95,6 @@
     </div>
     <div class="common-no-pad"></div>
 </div>
+</div>
 [% END %]
 [% INCLUDE "opac/parts/topnav_links.tt2" %]

diff --git a/Open-ILS/web/css/skin/default/opac/style.css b/Open-ILS/web/css/skin/default/opac/style.css
index cc896f5..52dcb1c 100644 (file)
--- a/Open-ILS/web/css/skin/default/opac/style.css
+++ b/Open-ILS/web/css/skin/default/opac/style.css
@@ -2,7 +2,7 @@ body {
        margin:0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
-       background:#333;
+       background: #252525;
 }
 
 img {
@@ -138,6 +138,13 @@ div.select-wrapper:hover {
 #dash_holds { color: #ffcc33; }
 #dash_pickup { color: #1dd93c; }
 #dash_fines { color: #f41d36; }
+#header-wrap {
+    background: linear-gradient(lightGreen, #252525);
+    background: -moz-linear-gradient(lightGreen, #252525);
+    background: -o-linear-gradient(lightGreen, #252525);
+    background: -webkit-linear-gradient(lightGreen, #252525);
+    background-color: lightGreen;
+}
 #header {
        color: #fff;
        padding: 26px 0px 26px 0px;
@@ -890,20 +897,23 @@ div.select-wrapper:hover {
 .facetField { border-top: 1px solid #CCC; }
 .facetFields { padding-left: 5px; }
 .facetFieldLineValue { overflow: hidden; text-overflow: ellipsis; }
-
+#footer-wrap {
+    background: linear-gradient(lightGreen, #252525);
+    background: -moz-linear-gradient(lightGreen, #252525);
+    background: -o-linear-gradient(lightGreen, #252525);
+    background: -webkit-linear-gradient(lightGreen, #252525);
+    background-color: lightGreen;
+}
 #footer {
        padding-top:5px;
        padding-bottom: 10px;
-       color: white;
        margin: auto;
        width: 974px;
-       color: #afafaf;
        font-size: 11px;
 }
 
 #footer a {
-       color: white;
-       color: #afafaf;
+       color: black;
 }
 
 .color_4 {