From 8d56b14cc8b3beb133ef071900e2fef57c7f938c Mon Sep 17 00:00:00 2001 From: Shane <shane.sammons@gmail.com> Date: Wed, 7 Mar 2012 17:21:06 -0500 Subject: [PATCH] Bug 7669: Add CSS classes to OPAC results thumbnails Looks at the code for the images in the template I notices some were raw images, some were encased in <div> tags, and no-images were in <spans>. I added classes to the elements to make then more easily modified by the end user through the OPAC CSS options. Also, all images and no-images now have float:left (this was in the .thumbnail class). I combines the thumbnail elements into the .no-image{} class. It does not have div.no-image like the still active span.no-image, because that is an element specific class and thus any settings in it override user settings. So, it has to stay simply .no-image. Images "<img>" now have a class thumbnail_image. This was in keeping with consistent and unique element classes. thumbnail is used by all the <div> elements. Here are the new classes I have added, that are vendor/company specific: /* New Classes for Thumbnail Images */ .thumbnail_image { /* specific class for the actual <img> tag */ } /* specific classes for thumbnails */ .opac_thumb, .amazon_thumb, .google_thumb, .syndetics_thumb, .openlibrary_thumb, .bakertaylor_thumb{ } /* specific classes for no-image */ .amazon_no, .google_no, .openlibrary_no, .bakertaylor_no{ } Example Code to see why: /*examples how a specific class works*/ div.amazon_no{ /*Amazon no image [seem broken in code]*/ border: 1px solid #FFA500; /*amazon is ornage*/ } .google_thumb, .google_no{/*Google no image*/ border-top: 2px solid #F00; border-right: 2px solid #080; border-bottom: 2px solid #FF0; border-left: 2px solid #00F; padding: 2px; } .openlibrary_no{ background: url(http://openlibrary.org/images/logo_IA-sm.png) right center no-repeat; color: #00F; text-align: left; } Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com> --- koha-tmpl/opac-tmpl/prog/en/css/opac.css | 15 ++++- .../opac-tmpl/prog/en/modules/opac-results.tt | 58 +++++++++++--------- 2 files changed, 47 insertions(+), 26 deletions(-) diff --git a/koha-tmpl/opac-tmpl/prog/en/css/opac.css b/koha-tmpl/opac-tmpl/prog/en/css/opac.css index 3149784..4765e81 100644 --- a/koha-tmpl/opac-tmpl/prog/en/css/opac.css +++ b/koha-tmpl/opac-tmpl/prog/en/css/opac.css @@ -2116,7 +2116,7 @@ table#items th { .results_summary img { margin : 0 5px; } -span.no-image { +span.no-image{ background-color : #FFF; border: 1px solid #979797; color : #AAA; @@ -2850,3 +2850,16 @@ body#opac-main #opacmainuserblockmobile { video { width: 480px; } + +.no-image{/*make it like the thumbnail class*/ + float : left; + margin : 0pt 5px 5px 0pt; + background-color : #FFF; + border: 1px solid #979797; + color : #AAA; + display:block; + font-size : 86%; + font-weight : bold; + text-align : center; + width : 75px; +} diff --git a/koha-tmpl/opac-tmpl/prog/en/modules/opac-results.tt b/koha-tmpl/opac-tmpl/prog/en/modules/opac-results.tt index 2e3ad22..86bae73 100644 --- a/koha-tmpl/opac-tmpl/prog/en/modules/opac-results.tt +++ b/koha-tmpl/opac-tmpl/prog/en/modules/opac-results.tt @@ -624,31 +624,39 @@ $(document).ready(function(){ <a class="addtocart cart[% SEARCH_RESULT.biblionumber %]" href="#" onclick="addRecord('[% SEARCH_RESULT.biblionumber %]'); return false;">Add to cart</a> <a style="display:none;" class="cartRemove cartR[% SEARCH_RESULT.biblionumber %]" href="#" onclick="delSingleRecord('[% SEARCH_RESULT.biblionumber %]'); return false;">(remove)</a> [% END %] [% END %] - </span> - </td><td> - <a class="p1" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% SEARCH_RESULT.biblionumber %]"> - [% IF ( OPACLocalCoverImages ) %]<span title="[% SEARCH_RESULT.biblionumber |url %]" class="[% SEARCH_RESULT.biblionumber %]" id="local-thumbnail[% loop.count %]"></span>[% END %] - [% IF ( OPACAmazonCoverImages ) %][% IF ( SEARCH_RESULT.normalized_isbn ) %]<img src="http://images.amazon.com/images/P/[% SEARCH_RESULT.normalized_isbn %].01.TZZZZZZZ.jpg" alt="" class="thumbnail" />[% ELSE %]<span class="no-image">No cover image available</span>[% END %][% END %] - - [% IF ( SyndeticsEnabled ) %] - [% IF ( SyndeticsCoverImages ) %] - [% IF SEARCH_RESULT.normalized_isbn %] - [% IF ( using_https ) %] - <img src="https://secure.syndetics.com/index.aspx?isbn=[% SEARCH_RESULT.normalized_isbn %]/SC.GIF&client=[% SyndeticsClientCode %]&type=xw10&upc=[% SEARCH_RESULT.normalized_upc %]&oclc=[% SEARCH_RESULT.normalized_oclc %]" alt="" class="thumbnail" /> - [% ELSE %] - <img src="http://www.syndetics.com/index.aspx?isbn=[% SEARCH_RESULT.normalized_isbn %]/SC.GIF&client=[% SyndeticsClientCode %]&type=xw10&upc=[% SEARCH_RESULT.normalized_upc %]&oclc=[% SEARCH_RESULT.normalized_oclc %]" alt="" class="thumbnail" /> - [% END %] - [% ELSE %] - <span class="no-image">No cover image available</span> - [% END %] - [% END %] - [% END %] - - [% IF ( GoogleJackets ) %][% IF ( SEARCH_RESULT.normalized_isbn ) %]<span style="block" title="[% SEARCH_RESULT.biblionumber |url %]" class="[% SEARCH_RESULT.normalized_isbn %]" id="gbs-thumbnail[% loop.count %]"></span>[% ELSE %]<span class="no-image">No cover image available</span>[% END %][% END %] - [% IF OpenLibraryCovers %][% IF SEARCH_RESULT.normalized_isbn %]<span style="block" title="[% SEARCH_RESULT.biblionumber %]" class="[% SEARCH_RESULT.normalized_isbn %]" id="openlibrary-thumbnail[% loop.count %]"></span>[% ELSE %]<span class="no-image">No cover image available</span>[% END %][% END %] - </a> - [% IF ( BakerTaylorEnabled ) %][% IF ( SEARCH_RESULT.normalized_isbn ) %]<a href="https://[% BakerTaylorBookstoreURL |html %][% SEARCH_RESULT.normalized_isbn %]"><img alt="See Baker & Taylor" src="[% BakerTaylorImageURL |html %][% SEARCH_RESULT.normalized_isbn %]" /></a>[% ELSE %]<span class="no-image">No cover image available</span>[% END %][% END %] - </td> + </span> + </td><td> + <a class="p1" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% SEARCH_RESULT.biblionumber %]"> + [% IF ( OPACLocalCoverImages ) %] + <div title="[% SEARCH_RESULT.biblionumber |url %]" class="thumbnail opac_thumb [% SEARCH_RESULT.biblionumber %]" id="local-thumbnail[% loop.count %]"></div> + [% END %] + [% IF ( OPACAmazonEnabled ) %][% IF ( OPACAmazonCoverImages ) %][% IF ( SEARCH_RESULT.normalized_isbn ) %] + <div class="thumbnail amazon_thumb"><img src="http://images.amazon.com/images/P/[% SEARCH_RESULT.normalized_isbn %].01.TZZZZZZZ.jpg" alt="" class="thumbnail_image" /></div> + [% ELSE %] + <div class="no-image amazon_no">No cover image available</div> + [% END %][% END %][% END %] + [% IF ( SyndeticsEnabled ) %][% IF ( SyndeticsCoverImages ) %][% IF ( using_https ) %] + <div class="thumbnail syndetics_thumb"><img src="https://secure.syndetics.com/index.aspx?isbn=[% SEARCH_RESULT.normalized_isbn %]/SC.GIF&client=[% SyndeticsClientCode %]&type=xw10&upc=[% SEARCH_RESULT.normalized_upc %]&oclc=[% SEARCH_RESULT.normalized_oclc %]" alt="" class="thumbnail_image" /> + [% ELSE %] + <div class="thumbnail syndetics_thumb"><img src="http://www.syndetics.com/index.aspx?isbn=[% SEARCH_RESULT.normalized_isbn %]/SC.GIF&client=[% SyndeticsClientCode %]&type=xw10&upc=[% SEARCH_RESULT.normalized_upc %]&oclc=[% SEARCH_RESULT.normalized_oclc %]" alt="" class="thumbnail_image" /> + [% END %][% END %][% END %] + [% IF ( GoogleJackets ) %][% IF ( SEARCH_RESULT.normalized_isbn ) %] + <div title="[% SEARCH_RESULT.biblionumber |url %]" class="thumbnail google_thumb [% SEARCH_RESULT.normalized_isbn %]" id="gbs-thumbnail[% loop.count %]"></div> + [% ELSE %] + <div class="no-image google_no">No cover image available</div> + [% END %][% END %] + [% IF OpenLibraryCovers %][% IF SEARCH_RESULT.normalized_isbn %] + <div title="[% SEARCH_RESULT.biblionumber %]" class="thumbnail openlibrary_thumb [% SEARCH_RESULT.normalized_isbn %]" id="openlibrary-thumbnail[% loop.count %]"></div> + [% ELSE %] + <div class="no-image openlibrary_no">No cover image available</div> + [% END %][% END %] + </a> + [% IF ( BakerTaylorEnabled ) %][% IF ( SEARCH_RESULT.normalized_isbn ) %] + <div class="thumbnail bakertaylor_thumb"><a href="https://[% BakerTaylorBookstoreURL |html %][% SEARCH_RESULT.normalized_isbn %]"><img alt="See Baker & Taylor" src="[% BakerTaylorImageURL |html %][% SEARCH_RESULT.normalized_isbn %]" /></a></div> + [% ELSE %] + <div class="no-image bakertaylor_no">No cover image available</div> + [% END %][% END %] + </td> </tr> [% END %] </table> -- 1.7.10.4