Style the advanced search tabs with CSS

We could go further and disable the link on the active advanced search
tab, but for now we're just replacing what was there with a reasonable
visual approximation.

Signed-off-by: Dan Scott <dscott@laurentian.ca>

diff --git a/Open-ILS/src/templates/opac/advanced.tt2 b/Open-ILS/src/templates/opac/advanced.tt2
index 23066bf..04e2041 100644 (file)
--- a/Open-ILS/src/templates/opac/advanced.tt2
+++ b/Open-ILS/src/templates/opac/advanced.tt2
@@ -7,9 +7,9 @@
         [% INCLUDE "opac/parts/printnav.tt2" %]
         <div id="adv_search_parent">
             <div id="adv_search_tabs">
-                <a href="?pane=advanced" alt="[% l('Advanced Search') %]" [% IF pane == 'advanced' %]class="on" [% END %]id="adv_search"></a>
-                <a href="?pane=numeric" alt="[% l('Numeric Search') %]" [% IF pane == 'numeric' %]class="on" [% END %]id="num_search"></a>
-                <a href="?pane=expert" alt="[% l('Expert Search') %]" [% IF pane == 'expert' %]class="on" [% END %]id="expert_search"></a>
+                <a href="?pane=advanced" [% IF pane == 'advanced' %]class="on" [% END %]id="adv_search">[% l('Advanced Search') %]</a>
+                <a href="?pane=numeric" [% IF pane == 'numeric' %]class="on" [% END %]id="num_search">[% l('Numeric Search') %]</a>
+                <a href="?pane=expert" [% IF pane == 'expert' %]class="on" [% END %]id="expert_search">[% l('Expert Search') %]</a>
             </div>
         </div>
     </div>

diff --git a/Open-ILS/web/css/skin/default/opac/style.css b/Open-ILS/web/css/skin/default/opac/style.css
index 2e88f84..1bc4f53 100644 (file)
--- a/Open-ILS/web/css/skin/default/opac/style.css
+++ b/Open-ILS/web/css/skin/default/opac/style.css
@@ -274,40 +274,29 @@ div.select-wrapper:hover {
        font-size: 10px;
 }
 #adv_search_tabs {
-       height:33px;
+       height: 40px;
        width:974px;
        margin:auto;
 }
 
 #adv_search_tabs a {
-       float: left;
+    float: left;
+       text-align: center;
+    vertical-align: middle;
        display: block;
-       height:33px;
-       margin-right:7px;
-}
-
-#adv_search {
-       width:156px;
-       background:url('/images/adv_search_off.gif') no-repeat bottom;
-}
-#adv_search.on {
-       background: url('/images/adv_search_on.gif') no-repeat bottom !important;
+       margin: 10px 7px 10px 0px;
+    padding: 10px 0px 10px 0px;
 }
 
-#num_search {
+#adv_search, #num_search, #expert_search {
        width:156px;
-       background:url('/images/num_search_off.gif') no-repeat bottom;
-}
-#num_search.on {
-       background: url('/images/num_search_on.gif') no-repeat bottom !important;
-}
-
-#expert_search {
-       width:156px;
-       background:url('/images/expert_search_off.gif') no-repeat bottom;
+    color: 45709b;
+    background: #9ad0f1;
+    font-weight: bold;
 }
-#expert_search.on {
-       background: url('/images/expert_search_on.gif') no-repeat bottom !important;
+#adv_search.on, #num_search.on, #expert_search.on {
+    color: #333333;
+    background: white;
 }
 
 #acct_tabs, #acct_fines_tabs {
@@ -1042,3 +1031,10 @@ a.dash-link:hover { text-decoration: underline !important; }
     background: #1784c7; 
 }
 .opac-button:hover { background: #359ee0; }
+
+a.opac-button {
+    margin: 10px;
+    padding: 5px 10px 5px 10px;
+}
+
+