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

Dobrica Pavlinusic dpavlin at rot13.org
Wed Apr 18 16:24:06 CEST 2012


From: Owen Leonard <oleonard at myacpl.org>

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 <dpavlin at rot13.org>
---
 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({
             </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..797c0f5f920cda8a033752889ce78dd46adae2fa
GIT binary patch
literal 7511
zcmd^Ed010d-o7Cbq9BHW(x50w1Vjo50)kd+Kv9q_EV3_2SZq|lA}WhY0%2ba0YqFF
zKu~nVS_K!{(SW#1MMP~?te~O-$|@j`<olgqozIT*%<~BTHTi>_d+xb6zx93Jb4X)2
zt)4z@<}?h$rrX)BbcOFZ7>0jI#KTC^aDFO$5!P8bT4C6aS1qQbzk+LxC>yURw}{ZF
zZLG);%qlp79YV1SW33Bu4Pgbx{BSK~DZBw=IJn#N3`x2MB%K2iJ+Jiht&%l6PFQcL
za7{k<jbFAiui7*HpUcDdzvvUs^GL3)uI~3ys;a8GZE4iu@|ETKB8v at 0y~9!lgW=%d
zKxM>xcz7&e=dFsVWanM^ZTURktl9;EIp*K*TOL`qbKe=0;CzFCUGCe<z6~#-xh9x}
zAC*d_T8`T-GOD%R`Gtj{SZE>5g*P}N2 at N&XaZl3oN*fhR-;PL3LklU+J57QMT3(O6
z>=Qrj5w~@Z8ME^Z0|e(Ew#{|ry&05<#bWNEhmnzyBO at a^Ym*EE1>3i8ziDdPF(B^f
zmn;k^sBV#N+qP|CaKYo(Vw0f!!NI}!_;~5f&@r*pI4IwQop0d3%g}$<n?doYSn{H?
zNynZ4s$cxav%0>%zQ-LyPrJpVqoWVH#Idol3s`wC`^9rzco7j1J%eJZ^Uj;?l7WGN
z;LN(r%*<B<Vv~@9)^72J4I6rUdpB;}I5afW-{1fE^;l<T=eu|B^nJ6w at y$w3PHwfG
z)7CAHi;L?Xlo$r)yy}<q4NLs|{02v)gQF5o=JB?kvCQ)G+HQRRQXf8_FYUsNm_j3F
z?#P%#P;WijE4ukYGT$d7=hWRzn>Oirro!iT>i~<z^3ARt8kKS~j?ec_^UW6Z4@;i*
zjOnaRHeu&&-n=<GJG-Z+r=z2T>Ky-jm)O8ByScgf&6_t&CNm}`M*1u?ARr*P;Cgy`
z`rCIBUteFJ>{@$!`<H!V^E^`$5)zC8g>60J);D73gesv>sOOzN-z$yg!qr`yG~XxF
zh?&zpB-ycJhnJVv(1>(sL^3ogadUH9z!W+sR7XcgxA#c`b1sdJNhK1Ao at a{g+T^F*
zWAnUHM#PdONsaXI{pGbSXK%H`=Ruc*%HZC;d-v_&ZJJ9$R#uiVJ8xmo?$&O}H@=zr
zz8S`>+^DFil#~<$zbuN=4vN!Gic@^wJ4yGT*pQjSX0uyfi*?)++k3^G17a<w?fO3O
zR3^=tYsAVOd?%4gZ$bsG4huboVK^+x)yWMm|Cc|Q+mM0|hLLaEt+aBFe!w2y^)*Hy
z;S-Kb!Ra+&IKFn+ at u_m{<HJg=jwi)hmAh!uNp#z$aC!N#*Yd00ui9^ZahRNFl5R%F
zsCM`3&Evj`_B?2dCy<0y2daNQ5a+5oe#_olp5X3vsAT+BQqrznN%2&4%jC%nb1p`s
zz`F@$IJs0V%&7?Ei4-|7V<mkig-b-w;5eVPh!tv;=RhRU$=)P$RXGA_y*eS(TH*av
zBc?MxcXQ#QMc*awpNf+s&Q**(7;MeOtQ!*Uy?IknNTP5Vr=Ao{v$y~AAuZWMJO+M}
zO#FniKI&sU4 at EFn7`4a}A37e-s8tm?IW867kwx{G9MNv1^P1b?_M)ZBh6Wy;`^ne@
zOctJ}tta40mF~0HD1+kMoV1*@si_(of#Z+(JePAHI-{sRzF6W$AjEZM6y5D!rl<<e
zXumo^rzp88yLl)p^3!kx(ie46o#Ri$PC>x;g$v54{HY|m*YuPd5(OfqYwN{eDa!a^
zu;DY){)w1=^d at 55nxs>hTq-VNiDU+et`xnwHlB;s<t^f4L<Oig%jpy at xu;zug%T8n
zL*+e*<YH{mKKz$9>_3(Np(=SLt|erZTG=~eny3#(D}3<!&@{i5n=@;mZ*XS}Z0At8
z#^vS`t2}NwL^dP5;x!Z6hAny(eq!nSu9DYemEu|<ygd4pFIT`H1^Ykw^wA=s^G^!b
z+rTaFO;!qZX0=l=I>u64wwH8(^gCpsp6l5U8KM=>g6zBmbl9(>TDDP+NRjWlH1q8D
z_-P2doEnh3vNhxr1y_v!yda*{gs1AslL;*UwZbyYN?E<q<>1BqLNjv}#~COQ0pT2L
zl$wJ*n8hVC>bX%VIK>v}#fS`x;u&CXoxyAguivsc7EL!jma|K^u3HR<*eXm`H$q9D
z`REyb%_s4&HUC~C1_8+=CD|uJ^h}=UH5c2=0;g at 2Cjm+So5P>TGNarg%sLm6<<8O2
z&~OL$tS!c9`d?GHjpZ*41i8M(tHWzgFMimLodeg58p at AMUExPJqGKiYr>@kCNZ$$+
zN%WUZqn5W0JlvL at o4Yx1>Adl&W4*nM`e|)|kTq3if0L7gz!A+C>2Z4i8CUqYs1z!Y
z=zCbl4<*;*h!iCbONByGS67kmm)*9)6++?2sZ9GKjPr>&39B at S#dhzLX1z$$Z4k;r
zwodIZ>ng%L8P|z|CLv9%f at J4=&<s4g)zAvYAqZH at a^`ISu;boAe<qb)KX#T;e!CzQ
zx#Rw7V?%xgk`ej`SbfB`K;nY(7WD;-{JXZ2y=7O0vuDjdSh^<%b;G4i%5(lPTT?F?
zLUc09^Zwyq5BmFGm8p=*yghsLrqr*om0h*mHkm>Ew!LA65Q<8hbJu&ux`w at 5UYyn!
zf>%_#&G=eF5>Fc`i8|Er6VMGGJNB7xB0jA1Evo}65qOG2Rw#&1sn|z=yLLV;+7}7L
zQd0-bCy1zj>ABb3{C&oeBM;TxEY1Q-QSD6Qmy#|iC1mxt%9y;NHYfa2|K;n~)A25+
zffa>O7qT1=XE`n-bth-YuA|Qyk_~>UPC{2aCKUaosHe|}LSxx&dw at FY{GE#Pmpuj;
zmm}JYNb2+dc0os%R=p2hK47tK)a~A_zVddT7O1PTpntNrM6oYip{+!B_ugN^$$4wO
zA%IVWNZ4xygEZSDh>`FTH&KzskvvyaxHT?tW^2^S at wevW<QU|POPa^abQB0Y=5?1n
zvM65g%Ri~FGlkz>yKM at z#K}8y7kMN?QC$-B0X+|9K4PFrYz<t*Ad(e&O(%9N?rx<)
zj`#8$jcoP>uUx%OWCLE7-w7JIFB&*;g!gdm at MTT#Yxkn;g<FHSX0A8;4vUx#wnaW=
zu8v)DVh6K&Z(`8f^%ck?3+0Y5ZWw-_)4P_wb*u(FipS2A!D(S<!=j at tg*yO0C|+N#
z$@u{(r3l9GN6Qv>JiY_8%%>T$j{lfe^G*$lylloRypE$ojjX4=w;7!1eH^yFM%9i8
zNmlxUGc7MFYJWNjYSX<yi$hrB<832C<<St7BhsA7GR6H0$T7ft^+%9tt@`=Sc0`?g
zAF}Y76sa%@W778qpQvtO)f_d7JwoahgvAyB(~SsDqW*nq^7ksAu;*x%GMO?Jsv*5f
z`D|8(0Tfk5lWK%Rb786h*mbpOiQy8hDD_gZtl9zsD10<++q5L(*w@~^2Wyl;#x@?P
zOl<oKY1jz(^M&?VA8hAqSMqEC;TgM4*+{4CzMCyWa at ut7rRm7H53%H*CaF3iQD>ch
zdDCJ at _VI8V6%a5EEqWktCzNnw3$@}NK-y)MoYGbBYU(=tZ*vs2W00t_t<ZY_x6I3F
zix$&y at UwPTk%9l(X{J}{s?qp=?IQk`pG>Wxk|!i1k4F8#;rw7i8i&OiwY at Xe$k2iI
zx{W}f*G(~!Lpe1%PRF$U{GLD*_%#1^*LF`2kM_0~3aX%5v^f|09{FA9>+ at Sq;-<@>
z|6(7U%sjtg at 9O3@%e4gYg+a at c)>d4d?chYoz<5j^5|;c2bm<m?X3#KD8Bys1dTXl%
zQWqa?r;2)z&?N6fo8pTR6HK3sZubtvnt at _u)AJo1ZSsNd)i}(;_Gi5DLx?$7b}8WP
zpD}}xsJu5l?@|8#{f{!V2>`muc%8U^96c&{23fxQoPMp)%F4>LRSx3PZc_a0=A+_<
zP2YjURJhUp=+W5Nc1w_>#@5rl`;Zi;kt+UwDSReBQ0 at BrFA@n*%i0_&m1?|79)5gd
z^lW1BOl2@|>y7KzOMjQOZvusj_HedMMMXu-OeMsBGgnbSysPve?3w5>h;7r2If<zu
zdNT3k at 9R5yVQ`BfI&>*fJ4fNJw}gTE(2H9K$BnTMH1zLC7`LbJjwvsCiR|dceqF-d
zVwseRM<@sZp9qNX=VvvgLpGH-hLs%Kr6An>xakI?AOsqnc22ooYE}zrd;82Yao-(=
zb093dnH%Whga*yIfls at -{xX>fcV){mFBXgsKCG8xL9i$9NQvA;&0QgghD;Wv#p;Ib
z$wWHy<&}9uNe)neB>MM-S8GdtRQO#V;v+~y3PTs|G71r91k*mA<W1_<gWR-X%{@vl
z6pvl(&%;}P=oN3 at rYZn_0;Q>$m*#OyC7O$jwQXV-T=KhA at 6omT^fbiRx6ano=>A+&
zWVIW at tIfGaxyHX&X(dE($k*OMqn7-#l-f!-Dbv;w{ts(Tf0ZggdfhHINQZQ+;*pGl
zY at 1HqZ;&tD@^?i0sq|vllYM55u>MX=xD|thnpszwkz at VF=}@1xE7}Xq1iG8SyR~QJ
z$#WgG0e<$j3RGiA$jtCF$@16D)ZX*-%dLsor>xNCz^q_}^6HhSYEPPVEDmI1Pzu%v
zzW6`~6YeX^GL{Jxmy%_$IaLXf3Uzcw9b{Wx^W-2&7j3--Nr?OwaRdhLK!zt~Paz6r
zGrLV4%(+72UEoBzS=X at Z*)BjGwuqLIHyug_XQRGWnTTp<&m^?kN+wPb_{~V4o&(CN
zndYhL4+lhyGINtEcze28+tt-%z$k;~i&2VMwi`-OywnTkA^~*hg3B-9;%~d^6VWMM
z++fNLn9Z)k>w?r!idH-%6J?kGN|XPh(a$IXx-vSFS`1pUF|tB_FC1BwJZD59z!9tf
z8w?doJ0Z17oMuhbKaqNn$*U!ZYf_--cz>Ooh;5kyL~<$%;irwQfdlpC1{cR=F;-s%
ze?>$MFf3D`fyZ^Ap$eG_te2;<@LLLfHX6#!4F;o_d?hG1g8n3w+XoOUv3<e%b5m=*
z``67|R~0}&&{nUWOUs}_X2zFZ`TVprmQ~+I(6QEMmOoT3S+FG`#Km3Klq=Pdup=`J
zE*oQzqSvcT;mg?XcorKn#TxdVbtw|yTuEIG9o$a%@K`DOX+LZMOqgZzYH%cEQrvN8
z6*^1G<7ZM4T`=w}US$NE3Hkj;NI;yaxIp<asTM_q32%g$d at Bfj4gVR%>};G?9=B#D
F{2w4>zwZD5

literal 0
HcmV?d00001

-- 
1.7.2.5



More information about the Koha-patches mailing list