Based on Dan Scott's "tpac_semantic_amazon_record_details" branch. My branch attempts

to add a more "Evergreen" feel to the TTPAC, versus the grey/blue hues in the current skin.

New features include transparent PNG's to replace old JPG to make use of transparency and
the addition of embedded font, Open Sans, via Google's Web Fonts API.

Signed-off-by: Michael Peters <mrpeters@library.in.gov>

diff --git a/Open-ILS/src/templates/opac/parts/footer.tt2 b/Open-ILS/src/templates/opac/parts/footer.tt2
index 0443b97..12987e4 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/footer.tt2
+++ b/Open-ILS/src/templates/opac/parts/footer.tt2
@@ -15,7 +15,7 @@
     <div id="footer_logo">
         [% l('Powered by') %]
         <a href="http://evergreen-ils.org">
-            <img src="[% ctx.media_prefix %]/opac/images/eg_tiny_logo.jpg"
+            <img src="[% ctx.media_prefix %]/opac/images/eg_tiny_logo.png"
                 style="border:none; width: 94px; height: 16px;"
                 alt="[% l('Evergreen') %]"
             />

diff --git a/Open-ILS/src/templates/opac/parts/homesearch.tt2 b/Open-ILS/src/templates/opac/parts/homesearch.tt2
index e5104b6..4ed9017 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/homesearch.tt2
+++ b/Open-ILS/src/templates/opac/parts/homesearch.tt2
@@ -1,3 +1,3 @@
 <div style='width:664px;height:35px;background:#FFFFFF;'>
-    <strong><center><img src="[% ctx.media_prefix %]/opac/images/main_logo.jpg" /></center></strong>
+    <strong><center><img src="[% ctx.media_prefix %]/opac/images/main_logo.png" /></center></strong>
 </div>

diff --git a/Open-ILS/src/templates/opac/parts/topnav_logo.tt2 b/Open-ILS/src/templates/opac/parts/topnav_logo.tt2
index 7e479f9..cd067d6 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/topnav_logo.tt2
+++ b/Open-ILS/src/templates/opac/parts/topnav_logo.tt2
@@ -1,2 +1,2 @@
         <a href="http://evergreen-ils.org"><img alt="[% l('Evergreen Logo') %]" 
-            src="[% ctx.media_prefix %]/opac/images/small_logo.jpg" /></a>
+            src="[% ctx.media_prefix %]/opac/images/small_logo.png" /></a>

diff --git a/Open-ILS/web/css/skin/default/opac/style.css b/Open-ILS/web/css/skin/default/opac/style.css
index 33a7f41..596afd7 100644 (file)
--- a/Open-ILS/web/css/skin/default/opac/style.css
+++ b/Open-ILS/web/css/skin/default/opac/style.css
@@ -1,8 +1,9 @@
 body {
        margin:0;
-       font-family: Arial, Helvetica, sans-serif;
+       font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
        font-size: 12px;
-       background:#333;
+       font-weight: 600;
+       background: #13533f url(/opac/images/header-bg.gif) repeat-x top left;
 }
 
 img {
@@ -10,20 +11,50 @@ img {
 }
 
 a {
-       color: #003399;
+       color: #black;
+       text-decoration: none;
+}
+
+a:hover {
+        color: white;
+        text-shadow: 0 0 0.2em #ffffff;
+        text-decoration: none;
 }
 
 #search-wrapper input[type=text] {
        border:none;
        margin:0;
        padding:0;
+       padding:3px;
+       margin:         0;
+       border-radius:4px;
+       -webkit-box-shadow:
+           0 3px 0 #ccc,
+           0 -1px #fff inset;
+       background: #f8f8f8;
+       color:#13533f;
+       border: 2px solid #DEDEDE;
+       display: inline-block;
+       font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
 }
 
 #search-wrapper select, .results_header_lbl select {
-       border:1px solid #e9ebf3;
-       margin:0;
-       padding:0;
-       width:168px;
+       padding:3px;
+       margin: 0;
+       border-radius:4px;
+       -webkit-box-shadow: 
+               0 3px 0 #ccc,
+               0 -1px #fff inset;
+       background: #f8f8f8;
+       color:#13533f;
+       border: 2px solid #DEDEDE;
+       display: inline-block;
+       -webkit-appearance:none; 
+       cursor:pointer;
+       padding: 5px;
+       height:30px;
+       overflow: hidden;
+       font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
 }
 
 /*
@@ -152,20 +183,22 @@ div.select-wrapper:hover {
 
 #header a:hover {
        color: white;
+       text-shadow: 0 0 0.2em #ffffff;
        text-decoration: none;
 }
 
 #header-links {
-       color: #afafaf;
-       font-size: 11px;
-       font-weight: bold;
+       color: #ffffff;
+       font-size: 12px;
+       font-weight: normal;
        position: relative;
        top:4px;
-       
 }
 
 #header-links a {
-       color: #afafaf;
+       color: #ffffff;
+       font-size: 13px;
+       font-weight: 700;
        display: block;
        float:left;
        margin-right:22px;
@@ -187,10 +220,6 @@ div.select-wrapper:hover {
        color: white;
 }
 
-#header #header-links2 a:hover {
-       text-decoration: underline;
-}
-
 #header #your-acct-login {
        padding-top:10px;
 }
@@ -217,13 +246,14 @@ div.select-wrapper:hover {
 #search-wrapper {
        border-bottom: 1px solid #e9ebf3;
        padding-bottom: 5px;
-       background: white;
+       background: #ffffff url(/opac/images/search-bg.gif) repeat-x top left;
+       min-height: 150px;
 }
 
 .search_box_wrapper {
-       border:1px solid #e9ebf3;
+       border:1px solid #4f786c;
        padding: 1px;
-    padding-left: 3px;
+       padding-left: 3px;
 }
 
 #search-wrapper #breadcrumb {
@@ -282,11 +312,11 @@ div.select-wrapper:hover {
     display: block;
     margin: 10px 7px 10px 0px;
     padding: 10px 0px 10px 0px;
-    -moz-border-radius: 5%; 
-    border-radius: 5%;
+    -moz-border-radius: 4px 4px 4px 4px;
+    border-radius: 4px 4px 4px 4px;
     font-weight: bold;
-    color: #45709b;
-    background: #9ad0f1;
+    color: #ffffff;
+    background: #2e8469;
     font-weight: bold;
 }
 
@@ -295,29 +325,46 @@ div.select-wrapper:hover {
 }
 
 #adv_search.on, #num_search.on, #expert_search.on {
-    color: #333333;
+    color: #13533f;
     background: white;
 }
 
 #adv_search_tabs a.acct-tab-on, #acct_tabs a.acct-tab-on, #acct_fines_tabs a.acct-tab-on {
-    color: #333333;
+    color: #13533f;
     background: white;
 }
 
+#main-content input[type=text], #main-content select {
+    padding:3px;
+    margin: 0;
+    border-radius:4px;
+    -webkit-box-shadow:
+        0 3px 0 #ccc,
+        0 -1px #fff inset;
+    background: #f8f8f8;
+    color:#13533f;
+    border: 2px solid #DEDEDE;
+    display: inline-block;
+    -webkit-appearance:none;
+    cursor:pointer;
+    background: url("/images/login-bg.jpg") repeat-x scroll center top transparent;
+    background-size: 162px 50px;
+}
+
 .acct-tab-off {
-    background: #9ad0f1;
+    background: #2e8469;
 }
 
 #acct_checked_tabs a, #acct_holds_tabs a, #acct_prefs_tabs a {
     margin-top: 0px;
     font-size: 10px;
-    color: #333333;
+    color: #ffffff;
     padding: 10px 10px 10px 10px;
 }
 
 #acct_checked_tabs div.selected a, #acct_holds_tabs div.selected a, #acct_prefs_tabs div.selected a {
     background: #e1e1e1;
-    color: #333333;
+    color: #13533f;
 }
 
 #acct_checked_tabs, #acct_holds_tabs, #acct_prefs_tabs {
@@ -328,11 +375,17 @@ div.select-wrapper:hover {
 #rdetail_header {
        font-size:14px;
        font-weight:bold;
-       color:#074079;
+       color:#13533f;
        padding: 5px 7px 6px 0px;
        border-bottom: 1px dotted #ccc;
 }
 
+#rdetail_title {
+       font-size: 18px;
+       font-weight: bold;
+       color: #13533f;
+}
+
 #rdetail_result_count {
        color: black;
        font-size: 11px;
@@ -379,6 +432,10 @@ div.select-wrapper:hover {
     padding-top: 1.5em;
 }
 
+#rdetails_status {
+    margin-top: 1.5em;
+}
+
 #rdetails_status td, #rdetails_status2 td {
        white-space:nowrap !important;
        padding: 7px 0px 3px 13px;
@@ -387,20 +444,21 @@ div.select-wrapper:hover {
 #rdetails_status thead th {
        background-color: #d8d8d8;
        padding: 13px 0px 13px 13px;
-       font-size: 10px;
+       font-size: 13px;
        text-transform: uppercase;
        font-weight: bold;
-    text-align: left;
+       text-align: left;
 }
 
 #rdetails_status tbody td {
        padding-left: 13px;
-    text-align: left;
+       text-align: left;
 }
 
 .rdetail_extras {
        height: 29px;
-       background: #9ad0f1;
+       background: #2e8469
+       color: white;
        padding-top:1px;
        margin-bottom: 10px;
        margin-top: 10px;
@@ -499,7 +557,7 @@ div.select-wrapper:hover {
 }
 
 #hp-ql-table a {
-       color: #333;
+       color: #13533f;
        font-weight: bold;
        font-size: 13px;
        text-transform: uppercase;
@@ -540,7 +598,7 @@ div.select-wrapper:hover {
 
 #content-wrapper {
        background: white;
-       min-height: 260px;
+       min-height: 150px;
        border-bottom: 1px solid black;
 }
 
@@ -556,7 +614,7 @@ div.select-wrapper:hover {
 #main-content .login_boxes {
        border: 1px solid #dedede;
        background:url('/images/login-bg.jpg') top repeat-x;
-       color: #333;
+       color: #13533f;
 }
 
 #main-content .login_boxes h1 {
@@ -645,7 +703,7 @@ div.select-wrapper:hover {
 .results_header_nav1 .h1 {
        font-size:14px;
        font-weight:bold;
-       color:#074079;
+       color:#13533F;
 }
 
 .start_end_links_span {
@@ -668,9 +726,6 @@ div.select-wrapper:hover {
 
 .result_table_subtable { width: 100%; border-collapse: collapse; border: 0; }
 
-
-
-
 .icon_text {
        text-transform:capitalize;
 }
@@ -734,7 +789,7 @@ div.select-wrapper:hover {
        height:22px;
        font-size:14px;
        font-weight:bold;
-       color:#074079;
+       color:#13533F;
        padding: 0px 7px 0px 0px;
        border-bottom: 1px dotted #ccc;
 }
@@ -817,7 +872,9 @@ div.select-wrapper:hover {
 }
 
 .search_catalog_lbl {
-       font-size: 14px;
+       font-size: 16px;
+       font-weight: bold;
+       color: #13533F;
 }
 
 .lbl1 {
@@ -845,7 +902,7 @@ div.select-wrapper:hover {
 }
 
 .myopac_payments_table th { text-align: left; }
-.myopac_payments_table thead th { border-bottom: 1px dashed #333; }
+.myopac_payments_table thead th { border-bottom: 1px dashed #13533f; }
 .myopac_payments_table thead th:first-child { width: 8em; }
 .myopac_payments_table tbody tr:nth-child(odd) { background-color: #ddd; }
 .myopac_payments_table form { display: inline; }
@@ -896,13 +953,19 @@ div.select-wrapper:hover {
        color: white;
        margin: auto;
        width: 974px;
-       color: #afafaf;
        font-size: 11px;
 }
 
 #footer a {
        color: white;
-       color: #afafaf;
+        font-size: 13px;
+        font-weight: 700;
+}
+
+#footer a:hover {
+        color: white;
+        text-shadow: 0 0 0.2em #ffffff;
+        text-decoration: none;
 }
 
 .color_4 {
@@ -912,8 +975,39 @@ div.select-wrapper:hover {
 }
 
 .advanced_div { padding-top: 15px; }
-#adv_global_search select { width: 13em; }
-#adv_global_input_table select { width: 7em; }
+
+#adv_global_search select { 
+width: 13em; 
+    padding:3px;
+    margin: 0;
+    border-radius:4px;
+    -webkit-box-shadow:
+        0 3px 0 #ccc,
+        0 -1px #fff inset;
+    background: #f8f8f8;
+    color:#13533f;
+    outline:none;
+    display: inline-block;
+    -webkit-appearance:none;
+    cursor:pointer;
+    font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
+}
+
+#adv_global_input_table select {
+    width: 7em; 
+    padding:3px;
+    margin: 0;
+    border-radius:4px;
+    -webkit-box-shadow:
+        0 3px 0 #ccc,
+        0 -1px #fff inset;
+    background: #f8f8f8;
+    color:#13533f;
+    outline:none;
+    display: inline-block;
+    -webkit-appearance:none;
+    font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
+}
 .adv_adv_link { font-size: 8pt; color: red; }
 #acct_prefs_header { float: left; }
 .search_page_nav_link { cursor: pointer; }
@@ -929,7 +1023,7 @@ div.select-wrapper:hover {
 .row-remover { position: relative; top: 1px; vertical-align: middle; }
 .subtle-button {
     background-color: #ffffff;
-    color: #003399; text-decoration: none;
+    color: #black; text-decoration: none;
     font-size: 12px;
     padding: 0; border: 0; margin: 0;
     vertical-align: middle;
@@ -994,9 +1088,11 @@ a.dash-link:hover { text-decoration: underline !important; }
 .opac-button, .results_header_btns, #simple-detail-view-links { 
     color: white; 
     font-weight: bold; 
-    -moz-border-radius: 5%;
-    border-radius: 5%;
-    background: #1784c7; 
+    -moz-border-radius: 4px 4px 4px 4px;
+    border-radius: 4px 4px 4px 4px;
+    background: #2E8469; 
+    font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
+    height: 30px;
 }
 
 .results_header_btns a, #simple-detail-view-links a {
@@ -1008,7 +1104,7 @@ a.dash-link:hover { text-decoration: underline !important; }
 }
 
 a.opac-button:hover, .results_header_btns a:hover, #simple-detail-view-links a:hover {
-    background: #359ee0;
+    background: #26a67e;
     text-decoration: none;
 }
 
@@ -1032,7 +1128,8 @@ a.opac-button {
 
 #rdetail_record_details {
     clear: both;
-    margin-top: 1em;
+    margin-top: 1.5em;
+    padding-top: 1.5em;
 }
 
 .rdetail_subject_type {
@@ -1044,7 +1141,7 @@ a.opac-button {
 
 .error { color: red; font-weight: bold; }
 .success { color: green; font-weight: bold; }
-
+=======
 .rdetail_related_subjects {
     margin-top: 1.5em;
 }

diff --git a/Open-ILS/web/images/plus_sign.png b/Open-ILS/web/images/plus_sign.png
index a17d58a..0a91735 100644 (file)
Binary files a/Open-ILS/web/images/plus_sign.png and b/Open-ILS/web/images/plus_sign.png differ

diff --git a/Open-ILS/web/images/rdetail_arrow.png b/Open-ILS/web/images/rdetail_arrow.png
index e464bf2..515e9aa 100644 (file)
Binary files a/Open-ILS/web/images/rdetail_arrow.png and b/Open-ILS/web/images/rdetail_arrow.png differ

diff --git a/Open-ILS/web/images/utils-corner-left.png b/Open-ILS/web/images/utils-corner-left.png
index db70a75..bed9956 100644 (file)
Binary files a/Open-ILS/web/images/utils-corner-left.png and b/Open-ILS/web/images/utils-corner-left.png differ

diff --git a/Open-ILS/web/images/utils-corner-mid.png b/Open-ILS/web/images/utils-corner-mid.png
index 80d4857..4fd4922 100644 (file)
Binary files a/Open-ILS/web/images/utils-corner-mid.png and b/Open-ILS/web/images/utils-corner-mid.png differ

diff --git a/Open-ILS/web/images/utils-corner-right.png b/Open-ILS/web/images/utils-corner-right.png
index 303ab75..f6fcebe 100644 (file)
Binary files a/Open-ILS/web/images/utils-corner-right.png and b/Open-ILS/web/images/utils-corner-right.png differ

diff --git a/Open-ILS/web/opac/images/content-bg.gif b/Open-ILS/web/opac/images/content-bg.gif
index 3af8f8b..9964a5f 100644 (file)
Binary files a/Open-ILS/web/opac/images/content-bg.gif and b/Open-ILS/web/opac/images/content-bg.gif differ