From f145e8dd136cdbadc9764734045274967aad7b55 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Wed, 11 Apr 2012 12:55:48 -0400 Subject: [PATCH] Bug 7500 - Use CSS Sprites for faster page loading This patch moves *most* small interface icons and the Koha log into a single 10K sprite image. CSS is used to position the sprite correctly for each icon instance. Not covered by this patch: XSLT icons, star ratings icons, table sort icons (the latter which I don't think can be done using this technique). A follow-up patch should remove the individual images which have been replaced by the sprite. Signed-off-by: Dobrica Pavlinusic --- koha-tmpl/opac-tmpl/prog/en/css/opac.css | 273 +++++++++++--------- .../opac-tmpl/prog/en/modules/opac-suggestions.tt | 2 +- koha-tmpl/opac-tmpl/prog/images/sprite.png | Bin 0 -> 7511 bytes 3 files changed, 157 insertions(+), 118 deletions(-) create mode 100644 koha-tmpl/opac-tmpl/prog/images/sprite.png diff --git a/koha-tmpl/opac-tmpl/prog/en/css/opac.css b/koha-tmpl/opac-tmpl/prog/en/css/opac.css index c10e08d..651564d 100644 --- a/koha-tmpl/opac-tmpl/prog/en/css/opac.css +++ b/koha-tmpl/opac-tmpl/prog/en/css/opac.css @@ -426,11 +426,15 @@ a .term { } #action a.print { - background-image:url(../../images/print.gif); + background-image: url("../../images/sprite.png"); + background-position: -5px -186px; + background-repeat: no-repeat; } #action a#furthersearches { - background : transparent url(../../images/menu-arrow.gif) no-repeat right center; + background-image: url("../../images/sprite.png"); + background-position: 106px -295px; + background-repeat: no-repeat; border : 1px solid #F3F3F3; margin-left : 5px; padding : 2px 26px 2px 10px; @@ -446,15 +450,21 @@ a .term { #action a.reserve, .searchresults a.reserve { - background-image:url(../../images/placereserve.gif); + background-image: url("../../images/sprite.png"); + background-position: -5px -144px; + background-repeat: no-repeat; } #action a.addtoshelf, #toolbar a.addtoshelf { - background-image:url(../../images/addtoshelf.gif); + background-image: url("../../images/sprite.png"); + background-position: -5px -225px; + background-repeat: no-repeat; } #action a.addtocart, #toolbar a.addtocart { - background-image:url(../../images/cart2.gif); + background-image: url("../../images/sprite.png"); + background-position: -5px -265px; + background-repeat: no-repeat; } #action a.cartRemove, .actions a.cartRemove { @@ -465,8 +475,10 @@ a .term { } #action a.incart { - background-image:url(../../images/cart2.gif); - color : #666; + background-image: url("../../images/sprite.png"); + background-position: -5px -265px; + background-repeat: no-repeat; + color : #666; } /* toolbar buttons */ @@ -524,100 +536,115 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', end #toolbar a.print { - background: transparent url(../../images/print-small.png) 10px 50% no-repeat; + background-image: url("../../images/sprite.png"); + background-position : 0px -423px; + background-repeat: no-repeat; text-decoration : none; padding-left : 30px; } #toolbar a.brief { - background: transparent url(../../images/brief.gif) 5px 50% no-repeat; + background-image : url("../../images/sprite.png"); + background-position : -2px -868px; + background-repeat: no-repeat; text-decoration : none; padding-left : 27px; } #toolbar a.detail { - background: transparent url(../../images/detail.gif) 5px 50% no-repeat; + background-image : url("../../images/sprite.png"); + background-position : -2px -898px; + background-repeat: no-repeat; text-decoration : none; padding-left : 27px; } #toolbar a.download { - background : transparent url("../../images/download.png") 7px 50% no-repeat; - padding-left : 24px; + background-image : url("../../images/sprite.png"); + background-position : 2px -348px; + background-repeat: no-repeat; + padding-left : 28px; text-decoration : none; } #toolbar a.editshelf { - background : transparent url("../../images/shelf-edit.gif") 12px 50% no-repeat; + background-image : url("../../images/sprite.png"); + background-position : 2px -348px; + background-repeat: no-repeat; padding-left : 26px; text-decoration : none; } #toolbar a.empty { - background: transparent url(../../images/empty-small.png) 5px 50% no-repeat; + background-image : url("../../images/sprite.png"); + background-position : 2px -598px; + background-repeat: no-repeat; text-decoration : none; - padding-left : 21px; + padding-left : 30px; } #toolbar a.hide { - background: transparent url(../../images/close.gif) 5px 50% no-repeat; + background-image : url("../../images/sprite.png"); + background-position: -3px -814px; + background-repeat: no-repeat; text-decoration : none; padding-left : 26px; } #toolbar a.hold, #selections-toolbar a.hold { - background: transparent url(../../images/place-hold-small.png) 5px 50% no-repeat; + background-image: url("../../images/sprite.png"); + background-position : -5px -453px; + background-repeat: no-repeat; text-decoration : none; padding-left : 23px; } #selections-toolbar a.hold.disabled { - background: transparent url(../../images/place-hold-small-disabled.png) 5px 50% no-repeat; -} - -#toolbar a.newshelf { - background : transparent url("../../images/shelf-new.gif") 5px 50% no-repeat; - padding-left : 23px; - text-decoration : none; + background-image: url("../../images/sprite.png"); + background-position : -5px -621px; + background-repeat: no-repeat; } -#selections-toolbar a.removeitems { - background: transparent url(../../images/shelf-delete.gif) 11px 50% no-repeat; +#selections-toolbar a.removeitems, +#selections-toolbar a.deleteshelf { + background-image : url("../../images/sprite.png"); + background-position : 2px -690px; + background-repeat: no-repeat; text-decoration : none; padding-left : 25px; } -#selections-toolbar a.removeitems.disabled { - background: transparent url(../../images/shelf-delete-disabled.gif) 11px 50% no-repeat; +#selections-toolbar a.removeitems.disabled, +#selections-toolbar a.deleteshelf.disabled { + background-image: url("../../images/sprite.png"); + background-position : 2px -712px; + background-repeat: no-repeat; } #toolbar a.send, a.send { - background: transparent url(../../images/send.png) 2px 50% no-repeat; + background-image: url("../../images/sprite.png"); + background-position : 2px -386px; + background-repeat: no-repeat; text-decoration : none; padding-left : 28px; } #toolbar a.new { - background : transparent url("../../images/new.gif") 5px 50% no-repeat; + background-image : url("../../images/sprite.png"); + background-position : -4px -922px; + background-repeat : no-repeat; padding-left : 23px; text-decoration : none; } -#toolbar input.download { - background : transparent url("../../images/download.png") 7px 50% no-repeat; - border : 0; - color : #006699; - cursor : pointer; - padding-left : 24px; - text-decoration : none; -} - #toolbar input.editshelf, input.editshelf { - background : transparent url("../../images/shelf-edit.gif") 10px 50% no-repeat; + background-image : url("../../images/sprite.png"); + background-position : 2px -732px; + background-repeat: no-repeat; border : 0; color : #006699; cursor : pointer; @@ -627,37 +654,39 @@ input.editshelf { } #toolbar input.newshelf, +#toolbar a.newshelf, a.newshelf { - background : transparent url("../../images/shelf-new.gif") center left no-repeat; + background-image: url("../../images/sprite.png"); /* add to list icon */ + background-position: -4px -864px; + background-repeat: no-repeat; border : 0; color : #006699; cursor : pointer; font-size : 100%; margin: 0 0.5em; - padding-left : 15px; + padding-left : 23px; text-decoration : none; } a.newshelf.disabled { - background : transparent url("../../images/shelf-new-disabled.gif") center left no-repeat; + background-image: url("../../images/sprite.png"); /* add to list icon */ + background-position: -4px -791px; + background-repeat: no-repeat; } #toolbar input.deleteshelf, -input.deleteshelf, -a.deleteshelf { - background : transparent url("../../images/shelf-delete.gif") 7px 50% no-repeat; +input.deleteshelf { + background-image : url("../../images/sprite.png"); + background-position : 2px -685px; + background-repeat: no-repeat; border : 0; color : #006699; cursor : pointer; font-size : 100%; - padding-left : 20px; + padding-left : 25px; text-decoration : none; } -a.deleteshelf.disabled { - background : transparent url("../../images/shelf-delete-disabled.gif") 7px 50% no-repeat; -} - #toolbar input.deleteshelf:hover { color: #990033; } @@ -676,15 +705,19 @@ input.deleteshelf:active { #tagsel_span input.submit, #tagsel_tag { - background-image: url(../../images/tags-small.png); - background-position : 7px center; + background-image : url("../../images/sprite.png"); /* tag icon */ + background-position : 7px -640px; background-repeat : no-repeat; padding-left : 25px; text-decoration: none; } +#tagsel_tag { + background-position : -1px -643px; +} + #tagsel_tag.disabled { - background-image: url(../../images/tags-small-disabled.png); + background-position : -1px -667px; } #tagslist li { display : inline; } @@ -699,17 +732,17 @@ input.deleteshelf:active { } .addto a.addtocart { - background-image:url(../../images/cart2.gif); - background-position : 9px -3px; - background-repeat : no-repeat; + background-image: url("../../images/sprite.png"); /* cart icon */ + background-position: -5px -265px; + background-repeat: no-repeat; text-decoration : none; padding-left : 33px; } #placehold input.submit { - background-image:url(../../images/placereserve.gif); - background-position : 9px center; - background-repeat : no-repeat; + background-image: url("../../images/sprite.png"); /* place hold icon */ + background-position: -1px -140px; + background-repeat: no-repeat; text-decoration : none; padding-left : 23px; } @@ -725,7 +758,9 @@ input.deleteshelf:active { cursor : pointer; } .searchresults a.highlight_toggle { - background : transparent url(../../images/highlight.gif) -4px center no-repeat; + background-image: url("../../images/sprite.png"); /* place hold icon */ + background-position: -11px -841px; + background-repeat: no-repeat; display: none; font-weight: normal; padding : 0 10px 0 21px; @@ -1403,18 +1438,24 @@ padding-left : .4em; } .actions a.hold { - background : url("../../images/placehold-small.gif") center left no-repeat; + background-image : url("../../images/sprite.png"); + background-position : -10px -542px; + background-repeat: no-repeat; padding-left : 16px; } .actions a.addtocart { - background : url("../../images/cart-small.gif") center left no-repeat; - padding-left : 13px; + background-image : url("../../images/sprite.png"); + background-position : -10px -572px; + background-repeat: no-repeat; + padding-left : 15px; display : none; } .actions a.addtoshelf { - background : url("../../images/addtolist-small.gif") center left no-repeat; + background-image : url("../../images/sprite.png"); + background-position: -10px -27px; + background-repeat: no-repeat; padding-left : 13px; } @@ -1573,8 +1614,8 @@ ul#i18nMenu li ul li { ul#i18nMenu li.more a { - background-image:url(../../images/more-up-arrow.gif); - background-position:right center; + background-image : url("../../images/sprite.png"); + background-position : 37px -940px; background-repeat:no-repeat; padding-right: 1.3em; } @@ -1729,16 +1770,6 @@ div#menu li.active a:hover { padding : 2px; } -#further { - text-align : left; - font-size : 95%; - padding : 3px 3px .5em 1em; -} - -#further ul li { - list-style-image : url("../../images/further-bullet.gif"); -} - #amazonreviews h4 { font-size : 90%; margin : 0; @@ -1787,14 +1818,14 @@ span.starMT { #listsmenulink { background : #9FBFFF; - background: url("../../images/list.gif"),-moz-linear-gradient(top, #d7e5ff 0%, #b1cbff 50%, #9fbfff 100%); /* FF3.6+ */ - background: url("../../images/list.gif"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d7e5ff), color-stop(50%,#b1cbff), color-stop(100%,#9fbfff)); /* Chrome,Safari4+ */ - background: url("../../images/list.gif"),-webkit-linear-gradient(top, #d7e5ff 0%,#b1cbff 50%,#9fbfff 100%); /* Chrome10+,Safari5.1+ */ - background: url("../../images/list.gif"),-o-linear-gradient(top, #d7e5ff 0%,#b1cbff 50%,#9fbfff 100%); /* Opera 11.10+ */ - background: url("../../images/list.gif"),-ms-linear-gradient(top, #d7e5ff 0%,#b1cbff 50%,#9fbfff 100%); /* IE10+ */ - background: url("../../images/list.gif"),linear-gradient(top, #d7e5ff 0%,#b1cbff 50%,#9fbfff 100%); /* W3C */ + background: url("../../images/sprite.png"),-moz-linear-gradient(top, #d7e5ff 0%, #b1cbff 50%, #9fbfff 100%); /* FF3.6+ */ + background: url("../../images/sprite.png"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d7e5ff), color-stop(50%,#b1cbff), color-stop(100%,#9fbfff)); /* Chrome,Safari4+ */ + background: url("../../images/sprite.png"),-webkit-linear-gradient(top, #d7e5ff 0%,#b1cbff 50%,#9fbfff 100%); /* Chrome10+,Safari5.1+ */ + background: url("../../images/sprite.png"),-o-linear-gradient(top, #d7e5ff 0%,#b1cbff 50%,#9fbfff 100%); /* Opera 11.10+ */ + background: url("../../images/sprite.png"),-ms-linear-gradient(top, #d7e5ff 0%,#b1cbff 50%,#9fbfff 100%); /* IE10+ */ + background: url("../../images/sprite.png"),linear-gradient(top, #d7e5ff 0%,#b1cbff 50%,#9fbfff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7e5ff', endColorstr='#9fbfff',GradientType=0 ); /* IE6-9 */ - background-position: 85% 46%; + background-position: 40px -287px,top left; background-repeat: no-repeat; border: 1px solid #629DCF; color : #006699; @@ -1803,27 +1834,27 @@ span.starMT { #listsmenulink:hover { background-color : #b8d0e6; - background: url("../../images/list.gif"),-moz-linear-gradient(top, #e2ecf5 0%, #c3d8ea 50%, #b8d0e6 100%); /* FF3.6+ */ - background: url("../../images/list.gif"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2ecf5), color-stop(50%,#c3d8ea), color-stop(100%,#b8d0e6)); /* Chrome,Safari4+ */ - background: url("../../images/list.gif"),-webkit-linear-gradient(top, #e2ecf5 0%,#c3d8ea 50%,#b8d0e6 100%); /* Chrome10+,Safari5.1+ */ - background: url("../../images/list.gif"),-o-linear-gradient(top, #e2ecf5 0%,#c3d8ea 50%,#b8d0e6 100%); /* Opera 11.10+ */ - background: url("../../images/list.gif"),-ms-linear-gradient(top, #e2ecf5 0%,#c3d8ea 50%,#b8d0e6 100%); /* IE10+ */ - background: url("../../images/list.gif"),linear-gradient(top, #e2ecf5 0%,#c3d8ea 50%,#b8d0e6 100%); /* W3C */ + background: url("../../images/sprite.png"),-moz-linear-gradient(top, #e2ecf5 0%, #c3d8ea 50%, #b8d0e6 100%); /* FF3.6+ */ + background: url("../../images/sprite.png"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2ecf5), color-stop(50%,#c3d8ea), color-stop(100%,#b8d0e6)); /* Chrome,Safari4+ */ + background: url("../../images/sprite.png"),-webkit-linear-gradient(top, #e2ecf5 0%,#c3d8ea 50%,#b8d0e6 100%); /* Chrome10+,Safari5.1+ */ + background: url("../../images/sprite.png"),-o-linear-gradient(top, #e2ecf5 0%,#c3d8ea 50%,#b8d0e6 100%); /* Opera 11.10+ */ + background: url("../../images/sprite.png"),-ms-linear-gradient(top, #e2ecf5 0%,#c3d8ea 50%,#b8d0e6 100%); /* IE10+ */ + background: url("../../images/sprite.png"),linear-gradient(top, #e2ecf5 0%,#c3d8ea 50%,#b8d0e6 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2ecf5', endColorstr='#b8d0e6',GradientType=0 ); /* IE6-9 */ background-repeat: no-repeat; - background-position: 85% 46%; + background-position: 40px -287px,top left; } #cartmenulink { background: #98CB58; /* Old browsers */ - background: url("../../images/cart.gif"),-moz-linear-gradient(top, #d5eaba 0%, #b7db8a 50%, #98cb59 100%); /* FF3.6+ */ - background: url("../../images/cart.gif"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5eaba), color-stop(50%,#b7db8a), color-stop(100%,#98cb59)); /* Chrome,Safari4+ */ - background: url("../../images/cart.gif"),-webkit-linear-gradient(top, #d5eaba 0%,#b7db8a 50%,#98cb59 100%); /* Chrome10+,Safari5.1+ */ - background: url("../../images/cart.gif"),-o-linear-gradient(top, #d5eaba 0%,#b7db8a 50%,#98cb59 100%); /* Opera 11.10+ */ - background: url("../../images/cart.gif"),-ms-linear-gradient(top, #d5eaba 0%,#b7db8a 50%,#98cb59 100%); /* IE10+ */ - background: url("../../images/cart.gif"),linear-gradient(top, #d5eaba 0%,#b7db8a 50%,#98cb59 100%); /* W3C */ + background: url("../../images/sprite.png"),-moz-linear-gradient(top, #d5eaba 0%, #b7db8a 50%, #98cb59 100%); /* FF3.6+ */ + background: url("../../images/sprite.png"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5eaba), color-stop(50%,#b7db8a), color-stop(100%,#98cb59)); /* Chrome,Safari4+ */ + background: url("../../images/sprite.png"),-webkit-linear-gradient(top, #d5eaba 0%,#b7db8a 50%,#98cb59 100%); /* Chrome10+,Safari5.1+ */ + background: url("../../images/sprite.png"),-o-linear-gradient(top, #d5eaba 0%,#b7db8a 50%,#98cb59 100%); /* Opera 11.10+ */ + background: url("../../images/sprite.png"),-ms-linear-gradient(top, #d5eaba 0%,#b7db8a 50%,#98cb59 100%); /* IE10+ */ + background: url("../../images/sprite.png"),linear-gradient(top, #d5eaba 0%,#b7db8a 50%,#98cb59 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5eaba', endColorstr='#98cb59',GradientType=0 ); /* IE6-9 */ - background-position: 15% 46%; + background-position: -5px -256px, left top; background-repeat: no-repeat; border: 1px solid #5EA28C; color : #336600; @@ -1832,15 +1863,15 @@ span.starMT { #cartmenulink:hover { background-color : #BFDE96; - background: url("../../images/cart.gif"),-moz-linear-gradient(top, #e5f1d4 0%, #cbe4aa 50%, #c0de98 100%); /* FF3.6+ */ - background: url("../../images/cart.gif"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5f1d4), color-stop(50%,#cbe4aa), color-stop(100%,#c0de98)); /* Chrome,Safari4+ */ - background: url("../../images/cart.gif"),-webkit-linear-gradient(top, #e5f1d4 0%,#cbe4aa 50%,#c0de98 100%); /* Chrome10+,Safari5.1+ */ - background: url("../../images/cart.gif"),-o-linear-gradient(top, #e5f1d4 0%,#cbe4aa 50%,#c0de98 100%); /* Opera 11.10+ */ - background: url("../../images/cart.gif"),-ms-linear-gradient(top, #e5f1d4 0%,#cbe4aa 50%,#c0de98 100%); /* IE10+ */ - background: url("../../images/cart.gif"),linear-gradient(top, #e5f1d4 0%,#cbe4aa 50%,#c0de98 100%); /* W3C */ + background: url("../../images/sprite.png"),-moz-linear-gradient(top, #e5f1d4 0%, #cbe4aa 50%, #c0de98 100%); /* FF3.6+ */ + background: url("../../images/sprite.png"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5f1d4), color-stop(50%,#cbe4aa), color-stop(100%,#c0de98)); /* Chrome,Safari4+ */ + background: url("../../images/sprite.png"),-webkit-linear-gradient(top, #e5f1d4 0%,#cbe4aa 50%,#c0de98 100%); /* Chrome10+,Safari5.1+ */ + background: url("../../images/sprite.png"),-o-linear-gradient(top, #e5f1d4 0%,#cbe4aa 50%,#c0de98 100%); /* Opera 11.10+ */ + background: url("../../images/sprite.png"),-ms-linear-gradient(top, #e5f1d4 0%,#cbe4aa 50%,#c0de98 100%); /* IE10+ */ + background: url("../../images/sprite.png"),linear-gradient(top, #e5f1d4 0%,#cbe4aa 50%,#c0de98 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5f1d4', endColorstr='#c0de98',GradientType=0 ); /* IE6-9 */ background-repeat: no-repeat; - background-position: 15% 46%; + background-position: -5px -256px, left top; } /* IE 6 & 7 don't do multiple backgrounds, so remove extra padding */ @@ -1937,28 +1968,33 @@ span.view { } a#MARCview, span#MARCview, a#MARCviewPop, a#ISBDview, span#ISBDview, a#Normalview, a#Briefhistory, span#Normalview, a#Fullhistory, span#Fullhistory, span#Briefhistory { - background-position : 5px 3px; background-repeat : no-repeat; font-size : 87%; font-weight : normal; padding : .2em .5em; + padding-left : 21px; text-decoration: none; } a#MARCview, span#MARCview { - background-image : url(../../images/marc.gif); - padding-left : 17px; + background-image: url("../../images/sprite.png"); + background-position: -5px -26px; + background-repeat: no-repeat; } a#MARCviewPop, span#MARCviewPop { - background-image : url(../../images/marc.gif); - padding-left : 17px; + background-image: url("../../images/sprite.png"); + background-position: -5px -26px; + background-repeat: no-repeat; } a#ISBDview, span#ISBDview { - background-image : url(../../images/isbd.gif); - padding-left : 20px; + background-image: url("../../images/sprite.png"); + background-position: -5px -55px; + background-repeat: no-repeat; } a#Normalview, span#Normalview { - background-image : url(../../images/normal.gif); + background-image: url("../../images/sprite.png"); + background-position: -7px 3px; + background-repeat: no-repeat; padding-left : 15px; } @@ -2153,7 +2189,6 @@ div.bibmessage { background-color : #ffffb0; border-radius : 5px; padding : 3px; } #renewcontrols a { - background-position : 3px center; background-repeat : no-repeat; text-decoration:none; padding : .1em .4em; @@ -2161,11 +2196,15 @@ div.bibmessage { background-color : #ffffb0; border-radius : 5px; padding : 3px; } #renewselected_link { - background-image : url(../../images/check.png); + background-image : url("../../images/sprite.png"); + background-position : -5px -988px; + background-repeat: no-repeat; } #renewall_link { - background-image : url(../../images/checks.png); + background-image : url("../../images/sprite.png"); + background-position : -8px -964px; + background-repeat: no-repeat; } div.koha_url { @@ -2277,7 +2316,7 @@ a.koha_url { } .nav_results .l_Results a { - background:#E1E1E1 url("../../images/ico_b_results.gif") 14px 13px no-repeat; + background:#E1E1E1 url("../../images/sprite.png") no-repeat 0px -504px; color:#006699; display:block; padding:8px 28px; diff --git a/koha-tmpl/opac-tmpl/prog/en/modules/opac-suggestions.tt b/koha-tmpl/opac-tmpl/prog/en/modules/opac-suggestions.tt index 66f372f..71ba2e7 100644 --- a/koha-tmpl/opac-tmpl/prog/en/modules/opac-suggestions.tt +++ b/koha-tmpl/opac-tmpl/prog/en/modules/opac-suggestions.tt @@ -148,7 +148,7 @@ $.tablesorter.addParser({ [% END %]
-
Select all +
Select all Clear all | [% IF ( loggedinusername ) %]New purchase suggestion[% ELSE %][% IF ( AnonSuggestions ) %]New purchase suggestion[% END %][% END %]
diff --git a/koha-tmpl/opac-tmpl/prog/images/sprite.png b/koha-tmpl/opac-tmpl/prog/images/sprite.png new file mode 100644 index 0000000000000000000000000000000000000000..797c0f5f920cda8a033752889ce78dd46adae2fa GIT binary patch literal 7511 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 F{2w4>zwZD5 literal 0 HcmV?d00001 -- 1.7.2.5