From 71d934a774df5957508754a3b5b882708b4b1aa6 Mon Sep 17 00:00:00 2001 From: Dan Scott Date: Thu, 26 Apr 2012 15:45:21 -0400 Subject: [PATCH] Templatize TPAC CSS - change colors based on vhost Rather than requiring sites to copy & customize style.css for each site that just needs different colors, and then maintain those changes laboriously as style.css changes - or creating CSS files that override the styles for each site - use the power of Template Toolkit to control colors and other elements based on criteria such as the vhost name. Signed-off-by: Dan Scott --- .../src/perlmods/lib/OpenILS/WWW/EGCatLoader.pm | 1 + Open-ILS/src/perlmods/lib/OpenILS/WWW/EGWeb.pm | 3 + Open-ILS/src/templates/opac/parts/base.tt2 | 2 +- .../style.css => src/templates/opac/style_css.tt2} | 86 +++++++++++++--------- 4 files changed, 57 insertions(+), 35 deletions(-) rename Open-ILS/{web/css/skin/default/opac/style.css => src/templates/opac/style_css.tt2} (92%) diff --git a/Open-ILS/src/perlmods/lib/OpenILS/WWW/EGCatLoader.pm b/Open-ILS/src/perlmods/lib/OpenILS/WWW/EGCatLoader.pm index 2e83f0f013..9494194e0f 100644 --- a/Open-ILS/src/perlmods/lib/OpenILS/WWW/EGCatLoader.pm +++ b/Open-ILS/src/perlmods/lib/OpenILS/WWW/EGCatLoader.pm @@ -116,6 +116,7 @@ sub load { return $self->load_simple("home") if $path =~ m|opac/home|; return $self->load_simple("advanced") if $path =~ m:opac/(advanced|numeric|expert):; + return $self->load_simple("style_css") if $path =~ m|opac/style_css|; return $self->load_rresults if $path =~ m|opac/results|; return $self->load_print_record if $path =~ m|opac/record/print|; diff --git a/Open-ILS/src/perlmods/lib/OpenILS/WWW/EGWeb.pm b/Open-ILS/src/perlmods/lib/OpenILS/WWW/EGWeb.pm index 66fb47ed6a..9e37c581b2 100644 --- a/Open-ILS/src/perlmods/lib/OpenILS/WWW/EGWeb.pm +++ b/Open-ILS/src/perlmods/lib/OpenILS/WWW/EGWeb.pm @@ -25,6 +25,9 @@ sub handler { $r->content_type('text/html; encoding=utf8'); my($template, $page_args, $as_xml) = find_template($r, $base, $ctx); + if ($template =~ /_css/) { + $r->content_type('text/css'); + } $ctx->{page_args} = $page_args; my $stat = run_context_loader($r, $ctx); diff --git a/Open-ILS/src/templates/opac/parts/base.tt2 b/Open-ILS/src/templates/opac/parts/base.tt2 index 1721a9cbf1..b2765d1855 100644 --- a/Open-ILS/src/templates/opac/parts/base.tt2 +++ b/Open-ILS/src/templates/opac/parts/base.tt2 @@ -8,7 +8,7 @@ [% END %] - + [% l('Catalog - [_1]', ctx.page_title) %] [% IF want_dojo %] diff --git a/Open-ILS/web/css/skin/default/opac/style.css b/Open-ILS/src/templates/opac/style_css.tt2 similarity index 92% rename from Open-ILS/web/css/skin/default/opac/style.css rename to Open-ILS/src/templates/opac/style_css.tt2 index 0a33df78f1..3f3129ae86 100644 --- a/Open-ILS/web/css/skin/default/opac/style.css +++ b/Open-ILS/src/templates/opac/style_css.tt2 @@ -1,8 +1,26 @@ +[%- + USE CGI; + SWITCH CGI.virtual_host(); + CASE 'reddish.example.org'; + gradient1 = "#C94842"; + gradient2 = "#8F1F2D"; + CASE 'blueish.example.org'; + gradient1 = "#252525"; + gradient2 = "lightBlue"; + CASE 'blackwhite.example.org'; + gradient1 = "#FFFFFF"; + gradient2 = "#000000"; + CASE; + gradient1 = "#00593d"; + gradient2 = "#007a54"; + END; +-%] + body { margin:0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; - background: #00593d; + background: [% gradient1 %]; } img { @@ -18,7 +36,7 @@ img { } a { - color: #00593d; + color: [% gradient1 %]; } #search-wrapper input[type=text] { @@ -91,7 +109,7 @@ div.select-wrapper:hover { #dash_wrapper div { position: relative; vertical-align: middle; - background: #00593d; + background: [% gradient1 %]; border-radius: 5px; height: 3em; padding: 0em 1em 0em 1em; @@ -101,14 +119,14 @@ span.dash_divider { margin: 0em 1em 0em 1em; position: relative; top: 10px; - color: #007a54; + color: [% gradient2 %]; } #dashboard { clear:both; float:right; margin-top: 1em; - background: #00593d; + background: [% gradient1 %]; border-radius: 5px; height: 3em; } @@ -134,11 +152,11 @@ span.dash_divider { #dash_pickup { color: #1dd93c; } #dash_fines { color: #f41d36; } #header-wrap { - background: linear-gradient(#00593d, #007a54); - background: -moz-linear-gradient(#00593d, #007a54); - background: -o-linear-gradient(#00593d, #007a54); - background: -webkit-linear-gradient(#00593d, #007a54); - background-color: #007a54; + background: linear-gradient([% gradient1 %], [% gradient2 %]); + background: -moz-linear-gradient([% gradient1 %], [% gradient2 %]); + background: -o-linear-gradient([% gradient1 %], [% gradient2 %]); + background: -webkit-linear-gradient([% gradient1 %], [% gradient2 %]); + background-color: [% gradient2 %]; } #header { color: #fff; @@ -175,7 +193,7 @@ span.dash_divider { #header-links a:hover { color: white; - text-shadow: 0 0 0.2em #00593d, 0 0 0.2em #00593d; + text-shadow: 0 0 0.2em [% gradient1 %], 0 0 0.2em [% gradient1 %]; text-decoration: none; } @@ -297,7 +315,7 @@ span.dash_divider { } #adv_search_tabs a:hover, #acct_tabs a:hover, #acct_fines_tabs a:hover, #acct_checked_tabs a:hover, #acct_holds_tabs a:hover, #acct_prefs_tabs a:hover { - background: #00593d; + background: [% gradient1 %]; color: white; text-decoration: none; } @@ -342,7 +360,7 @@ span.dash_divider { } #rdetail_results a { - color:#007a54; + color:[% gradient2 %]; font-weight:bold; font-size: 1.2em; } @@ -388,7 +406,6 @@ div.rdetail_show_copies { div#rdetail_actions_div { float: right; - background: white; } span#rdetail_copy_counts { @@ -631,11 +648,12 @@ div.format_icon { } #main-content-after-bar { + float: left; margin-left: 1em; padding-left: 4px; } -#results-side-bar { float: left; width: 174px; margin-right: 5px; background: white; } +#results-side-bar { float: left; width: 174px; height: 500px; /* XXX to height of container*/ } #main-content .login_boxes { border: 1px solid #dedede; @@ -729,7 +747,7 @@ div.format_icon { .results_header_nav1 .h1 { font-size:14px; font-weight:bold; - color:#007a54; + color:[% gradient2 %]; } .start_end_links_span { @@ -840,7 +858,7 @@ div.result_place_hold { height:22px; font-size:14px; font-weight:bold; - color:#007a54; + color:[% gradient2 %]; padding: 0px 7px 0px 0px; border-bottom: 1px dotted #ccc; } @@ -938,7 +956,7 @@ div.result_place_hold { } #myopac_tabs, #adv_search_parent, #fines_payments_wrapper { - background: #007a54; + background: [% gradient2 %]; padding-top:5px; margin-bottom:20px; } @@ -1018,7 +1036,7 @@ div.facet_sidebar { .facet_box_temp .header { height:31px; overflow:hidden; - background:#00593d; + background:[% gradient1 %]; -moz-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-top-right-radius: 5px; @@ -1086,11 +1104,11 @@ div.facet_sidebar { } #footer-wrap { - background: linear-gradient(#007a54, #00593d); - background: -moz-linear-gradient(#007a54, #00593d); - background: -o-linear-gradient(#007a54, #00593d); - background: -webkit-linear-gradient(#007a54, #00593d); - background-color: #00593d; + background: linear-gradient([% gradient2 %], [% gradient1 %]); + background: -moz-linear-gradient([% gradient2 %], [% gradient1 %]); + background: -o-linear-gradient([% gradient2 %], [% gradient1 %]); + background: -webkit-linear-gradient([% gradient2 %], [% gradient1 %]); + background-color: [% gradient1 %]; } #footer { @@ -1103,7 +1121,7 @@ div.facet_sidebar { #footer a { color: white; text-decoration: none; - text-shadow: 0 0 0.2em #00593d, 0 0 0.2em #00593d; + text-shadow: 0 0 0.2em [% gradient1 %], 0 0 0.2em [% gradient1 %]; } #copyright_text, #footer_logo { @@ -1134,7 +1152,7 @@ div.facet_sidebar { .row-remover { position: relative; top: 1px; vertical-align: middle; } .subtle-button { background-color: #ffffff; - color: #00593d; text-decoration: none; + color: [% gradient1 %]; text-decoration: none; font-size: 12px; padding: 0; border: 0; margin: 0; vertical-align: middle; @@ -1204,12 +1222,12 @@ a.dash-link:hover { text-decoration: underline !important; } cursor: pointer !important; -moz-border-radius: 5px; border-radius: 5px; - border: 1px solid #007a54; - background: linear-gradient(#007a54, #00593d); - background: -moz-linear-gradient(#007a54, #00593d); - background: -o-linear-gradient(#007a54, #00593d); - background: -webkit-linear-gradient(#007a54, #00593d); - background-color: #00593d; + border: 1px solid [% gradient2 %]; + background: linear-gradient([% gradient2 %], [% gradient1 %]); + background: -moz-linear-gradient([% gradient2 %], [% gradient1 %]); + background: -o-linear-gradient([% gradient2 %], [% gradient1 %]); + background: -webkit-linear-gradient([% gradient2 %], [% gradient1 %]); + background-color: [% gradient1 %]; } .opac-button-header { @@ -1226,7 +1244,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: #00593d; + background: [% gradient1 %]; text-decoration: none; } @@ -1376,7 +1394,7 @@ table.bookbag-specific { .saved-searches-header .button { float: right; width: 28px; } .saved-searches-header .text { float: left; padding-right: 1em; margin: 0.5ex 0;} .saved-searches-header {font-weight: bold; font-size: 120%; } -.saved-searches { border-bottom: 1px solid #666; padding-right: 1em; } +.saved-searches { border-bottom: 1px solid #666; } #staff-saved-search { /* wraps .saved-searches-header and .saved-searches on the record page */ border-right: 1px solid #333; } -- 2.11.0