[Koha-patches] [PATCH] Bug 7500 - Use CSS Sprites for faster page loading

Owen Leonard oleonard at myacpl.org
Tue Apr 17 15:32:45 CEST 2012


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.
---
 koha-tmpl/opac-tmpl/prog/en/css/opac.css           |  240 ++++++++++----------
 .../opac-tmpl/prog/en/modules/opac-suggestions.tt  |    2 +-
 koha-tmpl/opac-tmpl/prog/images/sprite.png         |  Bin 0 -> 10105 bytes
 3 files changed, 124 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..2c1ac74 100644
--- a/koha-tmpl/opac-tmpl/prog/en/css/opac.css
+++ b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
@@ -176,7 +176,8 @@ h1#library {
 
 
 h1#libraryname {
-	background:transparent url(../../images/koha-logo.gif) no-repeat scroll 0%;
+	background-image: url("../../images/sprite.png");
+	background-position: -10px -9px;
 	border: 0;
 	float : left !important;
 	margin:0;
@@ -426,11 +427,13 @@ a .term {
 }
 
 #action a.print {
-	background-image:url(../../images/print.gif);
+  background-image: url("../../images/sprite.png");
+  background-position: -5px -253px;
 }
 
 #action a#furthersearches {
-	background : transparent url(../../images/menu-arrow.gif) no-repeat right center;
+	background-image: url("../../images/sprite.png");
+	background-position: 106px -362px;
 	border : 1px solid #F3F3F3;
 	margin-left : 5px;
 	padding : 2px 26px 2px 10px;
@@ -446,15 +449,18 @@ a .term {
 
 #action a.reserve,
 .searchresults a.reserve {
-	background-image:url(../../images/placereserve.gif);
+  background-image: url("../../images/sprite.png");
+  background-position: -5px -211px;
 }
 
 #action a.addtoshelf, #toolbar a.addtoshelf {
-	background-image:url(../../images/addtoshelf.gif);
+  background-image: url("../../images/sprite.png");
+  background-position: -5px -292px;
 }
 
 #action a.addtocart, #toolbar a.addtocart {
-	background-image:url(../../images/cart2.gif);
+  background-image: url("../../images/sprite.png");
+  background-position: -5px -332px;
 }
 
 #action a.cartRemove, .actions a.cartRemove {
@@ -465,7 +471,8 @@ a .term {
 }
 
 #action a.incart {
-	background-image:url(../../images/cart2.gif);
+  background-image: url("../../images/sprite.png");
+  background-position: -5px -332px;
 	color : #666;
 }
 
@@ -524,100 +531,102 @@ 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 -490px;
 	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 -935px;
 	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 -965px;
 	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 -415px;
+	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 -415px;
 	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 -665px;
 	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 -881px;
 	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 -520px;
 	text-decoration : none;
 	padding-left : 23px;
 }
 
 #selections-toolbar a.hold.disabled {
-	background: transparent url(../../images/place-hold-small-disabled.png) 5px 50% no-repeat;
+	background-image: url("../../images/sprite.png");
+	background-position : -5px -688px;
 }
 
-#toolbar a.newshelf {
-	background : transparent url("../../images/shelf-new.gif") 5px 50% no-repeat;
-	padding-left : 23px;
-	text-decoration : none;
-}
-
-#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 -757px;
 	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 -779px;
 }
 
 #toolbar a.send,
 a.send {
-	background: transparent url(../../images/send.png) 2px 50% no-repeat;
+	background-image: url("../../images/sprite.png");
+	background-position : 2px -453px;
 	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 -989px;
+	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 -799px;
 	border : 0;
 	color : #006699;
 	cursor : pointer;
@@ -627,37 +636,36 @@ 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 -831px;
 	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 -858px;
 }
 
 #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 -752px;
 	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 +684,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 -707px;
 	background-repeat : no-repeat;
 	padding-left : 25px;
 	text-decoration: none;
 }
 
+#tagsel_tag {
+	background-position : -1px -710px;
+}
+
 #tagsel_tag.disabled {
-	background-image: url(../../images/tags-small-disabled.png);
+	background-position : -1px -734px;
 }
 
 #tagslist li { display : inline; }
@@ -699,17 +711,15 @@ 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 -332px;
 	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 -207px;
 	text-decoration : none;
 	padding-left : 23px;
 }
@@ -725,7 +735,8 @@ 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 -908px;
 	display: none;
 	font-weight: normal;
 	padding : 0 10px 0 21px;
@@ -1403,18 +1414,21 @@ 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 -609px;
 	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 -639px;
+	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 -94px;
 	padding-left : 13px;
 }
 
@@ -1573,8 +1587,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 -1007px;
 	background-repeat:no-repeat;
 	padding-right: 1.3em;
 }
@@ -1729,16 +1743,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 +1791,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 -354px,top left;
 	background-repeat: no-repeat;
 	border: 1px solid #629DCF;
 	color : #006699;
@@ -1803,27 +1807,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 -354px,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 -323px, left top;
 	background-repeat: no-repeat;
 	border: 1px solid #5EA28C;
 	color : #336600;
@@ -1832,15 +1836,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 -323px, left top;
 }
 
 /* IE 6 & 7  don't do multiple backgrounds, so remove extra padding */
@@ -1937,28 +1941,29 @@ 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 -93px;
 }
 a#MARCviewPop, span#MARCviewPop {
-    background-image : url(../../images/marc.gif);
-    padding-left : 17px;
+	background-image: url("../../images/sprite.png");
+	background-position: -5px -93px;
 }
 a#ISBDview, span#ISBDview {
-	background-image : url(../../images/isbd.gif);
-	padding-left : 20px;
+	background-image: url("../../images/sprite.png");
+	background-position: -5px -122px;
 }
 a#Normalview, span#Normalview {
-	background-image : url(../../images/normal.gif);
+	background-image: url("../../images/sprite.png");
+	background-position: -5px -64px;
 	padding-left : 15px;
 }
 
@@ -2153,7 +2158,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 +2165,13 @@ 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 -1055px;
 }
 
 #renewall_link {
-	background-image : url(../../images/checks.png);
+	background-image : url("../../images/sprite.png");
+	background-position : -8px -1034px;
 }
 
 div.koha_url {
@@ -2277,7 +2283,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 -571px;
     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({
             </form>[% END %]
         <form action="/cgi-bin/koha/opac-suggestions.pl" method="post">
             <input type="hidden" name="op" value="delete_confirm" />
-            <div><span class="checkall"><a href="#" id="CheckAll">Select all</a></span>
+            <div id="toolbar"><span class="checkall"><a href="#" id="CheckAll">Select all</a></span>
         <span class="clearall"><a href="#" id="CheckNone">Clear all</a></span> | [% IF ( loggedinusername ) %]<a class="new" href="/cgi-bin/koha/opac-suggestions.pl?op=add">New purchase suggestion</a>[% ELSE %][% IF ( AnonSuggestions ) %]<a class="new" href="/cgi-bin/koha/opac-suggestions.pl?op=add">New purchase suggestion</a>[% END %][% END %]
 </div>
 			<table id="suggestt" class="checkboxed">
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..d3d54bedee2e548ea833a2839c6e714661b97e4e
GIT binary patch
literal 10105
zcmd^FXIN9&);=jDfC+*MQZ*n|MH7l3poS<8C at NJE3ki{cf*6_#781G+WB?l|GKh^q
zM;W{5XlN3O0s at L6N&p#((j~Mccb^lz_j{gip8MQ8qkca=e!waFoW1v2?|Rp}*5QcD
z`X7jjnu-tv5uF at Yxq-jQ5QJSIj{!$J9d9{-KUjbJb at mW+U0@}5v>TjjggbbJyYFFz
z?_-4eLH0ZL`1+BYb~F6_-250jB10<t>>vmOxj1_`EZp|f;NalfkK*3mUebocw*|r@
zM~)bK9eMphJTxZJbLDQ~6@`X|&fk)<h at Ku56}2JewyUdab*E(O)~$i*f`bPSn)#jb
z^73LZ7%d;CI)}uR9jAIm#KJyt->7&o<9I_u!`yWTlarHoCSOZPNN{#`j*N^P5J^6a
zNP0&k#$HDs2_<U|70 at E`+!F3D*qXBG=<h3nvy3(-+^gvv_9ooEeY?(jQID(Y?&AXM
zUD;NF*@I(J-3^DsPE~B&xN&vlufE62n^qVt_DQo0II|-3!r?P_DLYPh9K2u~d`>Er
z>bb>O1m{bo)j`K9tbV+``*@|kM_gtmE9jUY__!eCWCg^^3_ej6o>6Jw5zk_ok4{MX
zhQ_AElKp3 at K21m_#Zq%t=I&#HgW1)w=W8aX#7Fb$>RLX28k-#aG~P8Ne$?D{qM(uN
zd!ns>s(nCgx;=GlLOjonYv37g>XXX5@|<(2xo=c5F)<+)i*xV4E^FwD&UxC_J#xE6
zT5WFr^SxJs7u~%BqMl*NzJ2 at Ber@>u+53cxH5BHFjGHfiEq*s8mbP{cH?<AC?ih%U
zj?RDF($YCNIy&0<;ghtQm3XN(Dyw=@EV*9tuKHE)yN=?ZbiuvK_CI=`8+gQZ4~xmn
z6BOSQZ+k=|BO~qo;<I;}b|e>f_lts#Ro*BQ?%A`aYgjxvIr+Gzv$3^rXlQ6)R6IO9
zJU%|&Jt7u~ME#=@Q=hcRtg7x|$>@Z1bW&1S-4PfVD0H0D)-MhU3hL+`VYAuBo03G6
z(&D;5k}p206OL at l^}hJ9IqhcS#FWIu`$v8ExVC|*$w7WxTwH1?P5J at 4^!pnF&x8vP
zn)~|tcsySFz!b&zxS?mfXhI_GU>R*n{4_4vajG&Xy*xcVeUVSPXhJHQl=O=vT|-kb
zF)?ieVgrv at GUM3jxCH!s8m%+*Oz7<FG~SeG#yokks72T>Hu6gJNh_O}l1_*vlT*_6
z{;By}l5OH^bvH!ox<u=_#w_+d9v&VJ5Mqn2`2;~IDBNwmJ2?IS`~$g*@CFd1H|(^^
z-edo3-?0@*5EY^j49g*GZB8hG3K8f3r9)wuvzKqhX{Wlt1uLhzJJdN)aeGE<cXu{j
z*?e2vavn;al*Jo-x_&S&R&!e1z3bN<U4rE8W5tIK#jYx5mN<rhsfD4=F0n>tU7zBQ
z?EArrRl46$CA{j|lddjwO;kD!N8+%p4MSp#=5sQ8v}QDa?9NnKRZG#;Jwe?q)L#m2
z7uXtx%s9Qp&V7b3{cLvjgCqqpdqd4?pLA`EGSy3`{Y>W(ly~dlYeOShwB)*1+1Xbw
z7|_8&JJqG at o$u~{#(CeLL#WB1>p749EbPv7KFx&C@@JU&zuhY{*E#8YCo*bO*?j=3
zs{BWQJ_O#VJ+mR{DJ8q$4Z-=;+9b--ihA>u(&sb4LaZ;%xU$9WGHu5xQB>5E8O$LE
zJ)IORcw0S1&7?`kooITBX?MOTvefFAc?xO2tV-`)%$oO7>rqQ<vd-~BeXaX(Tj#jl
z(AQEwz_7P}q%OoMQwgOwLN#S~cJ|Gp`;Sq-sAo3LZQtzqs`Wn3)h%&9TE{f>jX5rF
zp{lOpbJh0ELo2Lp&g0G(pyf$~a>#tz-U6cDist&8M2{p+uW6pCFeTfP+CS-kV6-^!
zH;)Z9-FnL=kF8=|j8x-aJ?q_?`PNV`y+=c-T0f8s8(uxBa!nHUgBJ1GJg4kqg+kq#
zZmk-`MKcd+EnC2_JbdM{zmqpcu)AJ(gpgMNUG;N#y{Ka#2E~DB`<$DCw1c^7MSS0g
zU!_u$>=Sx=V$a>J7W3RNi(R~h1`wI!zU##Vtx7BD{GkIJCG1V#Wn6`s=I=0A<w9mm
zZiw|IoZF3k`=j<kRWCeJ&2uV5*5v7n6Umdp%tdM)huMmXYZ6ab8DwX-D7(jSZ_FfL
zQAFllc+KlH(PU%29g}v0nYv&%eKh9OEiw7J)CYatKA$lfGqpLUHcZ1j5KM$&#mDGS
zeXS{F=7pAW7cJfU6`uB{HngBZM!dbeVrERgP`P2X$K9eN0+#^1*g|R5KUVijO{@9I
z(XFl2m6}-(r={w&KX_MvbM8hR)Pkm<doM5Zv!*+lF#_$DU6~T9M%kR)C{KmX+2S&u
z*x9n|Ti$V8H>}5pX{MSP2#z^9meI5p&dSxja~s;isya8Wy!{hq+LaP7Z(Rr#*O#%n
zBY)!s)jsv4oPPb9ks$qM-A{%OmlG2I7*);AF4r{(o?fj`<QTuh=uWa&x&ofY5HqK<
zHC=V1|Dxe|)hmJai&j-C at W~n2_6YuK&Z8>2T4G6yCeP7~v@=N6h6*vPakpRhC)(gn
zPvbDQkFU_jz4EC at y2M*t at M|HOMQIp6B~&obPOD}9#`++YqF at UgGaO@9Y^|j|d5qec
zF<LSctA9GbSh<WQUtPC=KB#z<Atkf(XxpGQmHgz7KdM+G8_@`KxmUYnu0;w|wb;cF
za%+8~xxIh-dPSmg`Pf|C#vd5uAB^Vtohj9z9+)|e?yz0{!s~Ts<N5%b03aP&&~$58
z()dl%`$5I%{Rb4ZJNW}gf0J7>V-f9!d4p2U2MNh*-t^OUZbd1giEy6+n&V#F-GY^p
z$rtns4EPPz9_)-s(aEuSq3*=1^Oq~Fv&*@0krFxkg4ufX$%<C=#X9qO*x%Dm5$6Zf
zNDj|tIkLyEb^U_B`0k`wy#ho*txkKD;*$8ru)S`A<J$|i<TCuUjc3M at JT+4@2Ck1d
zPaB$@srfMzw-#H^kfY?KesHb~_>`F780Ewc-Sc!I-Oh7EO3?>*6jpil%v at 8IjlNX-
z>2_xg=3MiQpD<KaS23*(@BLYGTkXy2n^vCKw-562W1{%8J#zQa3}TdGch#&>VT<NP
z&1VH8QT--%*5iuW*S3cga_i at +B^X=AGSh})9QV5gk==6UnQWaCbD?&H{u1q=tmyp<
z?<_X~US48*uJcW=W0k<GInA+VP=f<$dc-<FD2qIpA!92k-}^AGL)}4MoeDCJayrwC
zzs>O^DjXyN-K7avt`wvOYQBVQfZbEI-Dj!ZX8L=Sem*UEBq2>QBSyar-uHHI=DKwc
zF<mfFLY)t94>>&8_Uq@<Y9A*<Lqn(W&x2Qcdpi at 7@U_TZ*8uw0^Z>~z$NoKd_M0A(
zs(DgquNVZ+`Sum5+oHizKaOD at Na8U~pYZaeWL|WG?Dp;U$JuAkiU;`-vcc~xIG;!V
zp*nl|j+b*u92Z*&)p#j#xwvagb`9sLK=__cWKDssR8W?*20wm^_{GIWqN1X*Z7ZEj
zhSR-%xn1=B;m&i3KPfG<2 at mMwTO+O<erAJ4Uu|4LOop>-1?94Zg{6fh*K1{axom{3
z#H}_pExmHCx(pT_E705zZ-1IAsvP?A%y2W8{iyk%)!p%rn0CZ(2IRl2T>fjpqpVhr
zrSTznI|cCsfk_%h#SE~U<!PM26z0YQr!~~?PT>KjPH<4 at 02f%A;7)+ue%r$WkrGY-
zP+dw+ikc7Bk;G8`B$R;Uc8RH{OD7=_J|6|nOGrH;DY85kyr%bt9LQIFl~^K$qkqPC
zG~~Y%oD7>MTDY!$;M`(%^4;mP2%JCwmqg}6d at 0ytTnptbW+t$DDW}<VWFHZ5o6VDE
zd|M8R4d{cRpb?O-0m1OWJbP#XUHcN>zI at j<A~j6}=SX6H5A<F9^7maoKv+{Bodi%s
zPTbCz{fiQxtpYYlAV<+?exx@;fDhDhu6zV>s=y`|d5Bi#?Nut>Zv at 1E4Q@GsFh}vy
z0|3D!ls})qL9iGPECuw4&1Ew<TyyMYkA}{KP2;Wge{CB1ADOsa<1eKElyQEy>g&UD
zPM!ye6LW`+O35Y0!Q8=ACq5i|5k^|=F9C2Sjqn~DHBsI!$F#wq(Y`-~`l*iKcmps|
z@}Nc%lNy^nvJY%o7+TFC^nh0>m2*z5t#3i{z at MeRxR;cXXK!GLxz6V6td#mr2X-d+
z2vFLJIAE^Ed+6_xHU7iIM2o0yd4TBwJEuh?$HtaW;k;RUzI#}9pi`29?UKo;WbS1n
zf<`U8Zy>CGUm8Yt{HYJ->+o`Uevvb(&=!7D=e&8C;jHf36)<5GGC!m#x1a##j`Is$
z$jX}mI>_4XZD#EEaJ0QxH)jr}Qx>TgRh7NGy*Det5R)&VJbNaXbqG92%s0e-KZ5>W
zyrR3*5QW7x{L|HfI*Z!i@#&wlWn4N3-vl%FXMXm40sHqW>H*RRo<`1EXOJ2u<MT1$
zAN7FI9-~7!Tj8=)+njwW0}YDrHT>_czIxOh9Ll(`;yP#Z<jL?$1S~E(C8|<?k`7p$
zfM-$|Zqnygm%<GLgLG|IUkO^9nU(c|59c(OTqmFT!$&00YQPz~ww(f%N9G5A;1RN5
z-&atsO`E-FYFg<v1RAu^WHSOGLw2X{2cNmiq8i3xCpqwYQni`#7-W>DM+8hif2{-Y
z9UjwNx>^N=Bv~L_wY0h%0+uYqz`YKzy-jwT?3A6`k1p0G$#l!nwl=-K(lXVSBMUS?
zU%GXtplT<#Rc#ancUr*Pe4;%s9Y4%sU6N2!<UpjQGsi;1YC1am<l69`UtAp{x0KFa
zX5`O7NGiV;^L4 at b_mNJrC?|Zd)`UTnAZNx~;!+X-xTP)Qol&${BBzg=e;VMSj1r$k
zC%deSf)!F3CCslAhpleRvUP!}XI8oTd(%fJMayaea^PJGc#N06{x6?DN4tHo!cX4T
zW0cRjl1vW3FqUJI=ExM{?dfr?oIP~-K}TL>5eh$qh(a1KbySWjkM74C0}`vv$v6II
zgnxT6M!xevsl&_&AR~kjzMsW^;ty;P;ixZZzP10_&iZ>Y5Z!38?DO+ at lX5RF*GfgU
zXpQ((=HmMK$C`_uEvJ?!14BNn?yku9oVY^0k~M-4I0wht;;`3e&YXE*B}%Tx7(L={
z?!v-bueg7BnZNzB7`bV<t66YH_v}Lby{6uO6H at 1{$E&*_k}Kcc%M14$&M$>(G4WN$
z0wI`79C^Yvw2i at X$p}IosViB*cC{uUA$RfB at X#6S?zVH*n=G)kL=e&NCVbblT9eF7
z%!zjZFi*E9cv3HSDAmSE;ks!$_L2YngG)am;3!T?8^?4WhuabXE}r=BO`@{e*^#FZ
zAA^u2F+cTRY6=!&I8OoGTUA7=ZCzlA*!erYbuI93G^czc1w|**WnqWqh?s;dSXnnx
zj2>qb#?098jUDA!c8rkkFbl-A_3G8QINUSXM;#fQz{r<FLpU=c;3`biMn!f0RU+6>
zJ_5I|m@)rDQUbIq;=p<ZpozZ?nAVub<se=-XZ-|Ez{9JSsbRzk%4=TCY30CqKaZ!;
z`UV6|Ui at 1q5!NsX)lebgs|e88{rioO0G>t at ta#4d<u1eDZ~`k6oVDK5rLY&%sR^nr
zewQ|ZUJJ^TUHuRmw-DyXwVV7}5rY3$6ULY~7+1{wv!1;2N!>K=6(tx&jjz83;NyBS
zS|&$7z9p`b at oh-;@_ at y`?;s at 2YnOnQ6*WedfCN0D2_8)<Dlw;CLzp|L^VOS&k;AO)
z&Q31e#MfPVDY7Kj;i=Y=g}ZQEl<ZQ%&noCKdpcD{?!wuss&Ycq0>Fs at E~-&qV*?g>
zN(*4s7U4w!R)6be!B13$N#EwGI*7nVMj1TG{}@8dFF6YHh0aE}XVO#P3palnVWs+Y
z#E0@}W&<KPOF2EqQJPQ!8cqetd3gcxT}ZP;-6iY!CRf)wD<t4LQc*VVyL%e1)DRJk
zWN at 0Ze(Bwi_9v(?P}`pCG|X{tGF+b}SVD!v^VU^jxMFiI3f5%jW=946sAghfLQI9l
z)p_h3>&sJ8SlZ^>KwnoWfR0W^20w|5hN(b3EG&#X#~MV7pzanPi!*~kZ1B|D#zraN
zG(sU6Tt1>FLHBOcCj1i&9t<d>kbQH&2Pa~FC>(8HGY_X~hpAdrM}F!-%$urxJ~tOF
zo77Ja^Lc#{Lu+ at _{oBAo{H|9%Mm3vZPzbG^z;8qka%BxdTb4nS1JXLw^nlBouLKBL
zO~SBYL850M at DrG`R5u`cI0^MigHC26<%lDXF*q`UE%bw|R6&J0v?%*pao*2Hmx!&|
zda%fJcJ*lBopp6p!Tf=UPQv6w?C{WV<12*efK%Q^Hv28Hv>a6Wtii`4%OcCle!TnT
zJlY^LBSYWd{g?4OcTy-jNfa1^KrUE)JGlThZ20q8J0$Il^nLto`0g_$1nIvX=#69y
zjdQ1g^hoP{tERTydI at _cLd7CAIC=j2-(QEW|D5pEd9HL1b+Sy&d)T)=>TZsZ6*GGY
zc?YVl(rwsqI(Ou$95nD+WGpxs-TE9RK-)_XA0CVt-&G_lnwCBZ&TX+_2#@Uj?6u^v
z!U(M;SGO1~M`B;UT;2yoBWYU06Ww5D6wyEHr8LeLMe%hyRRunlwp7s~G(3wPgPs#i
zk%Of-wGTTwr(l66kXe>H9v1EAUlW4sw*t@?PjMg21oT;3PiQj5$g(@U;jW#yu2k+?
za}YWw&+tPm==T*s2G(iE$VwJX52P8JUkI*#)d*)>v*_Lya6_iVG#euX5#Y-gs{PD`
zTYi*Q_SzRzxFxI3zUPPJnI>&aXcY&!RDdN2Ol5r`HlYBI53l6!*bNghA#V~_jOjQD
zx=f{<GE>ZpBN%xSZq{AGg|!^GJLuU0M8cn=<1bz%<UM`I4SI at DG{N}kJ5-hx1b-(z
zD;UuBdI=D4lxc^z4nVlF)xw+u^Zml%bqI7oC-e`5-3mG`A=qM^G{<-~fQMcHJrD|a
zLFX>iB*AatF>Y}~zy+ZuU0WFd3zR>%zh(K8LWAefjE4YnT;=;w5pdc{p%Jcvq!i!+
z-&OW5kEX8#4kBxtr=ACejYZyS-7hy~kLK80Dx!eBcg;cr+cz2m0rk~dk&Pzz;3?M^
z$-yc?aS>QvR!o%~783~{6Z75K0RQi2ZQV;!7r at 5>E at xw=0YQ1WwG&fB&4!O-duDBg
zWy0lFxLuQv$ggkH+Xs1aExrj6uQJ87+1uNu03m5O41K8~RnUWfB~U+r<-h;wiWZjq
zjsv$1U3A*5;K at k14j0q|Kd1$kuRQKOKZKVE#tJMB1`pFhH3z2zFxO%D7?o at cdalO)
zQ#f)Ra5d|k6-NOUUSIQ*6!@;;tqh91B-HucmPlOS8pwlMNX at xslOLxAZiKr`uEV at J
skCi7S*gsdpW8g0vb}bUPHY7lslWuwseI%g4|IR^94(nH4qtRpj0T~h7umAu6

literal 0
HcmV?d00001

-- 
1.7.5.4



More information about the Koha-patches mailing list