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 <dpavlin@rot13.org>
Signed-off-by: Paul Poulain <paul.poulain@biblibre.com>

diff --git a/koha-tmpl/opac-tmpl/prog/en/css/opac.css b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
index c10e08d..0cc7f2d 100644 (file)
--- 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;
+    background-image: url("../../images/sprite.png");
+    background-position : -5px -621px;
+    background-repeat: no-repeat;
 }
 
-#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 -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 (file)
--- 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 (file)
index 0000000..797c0f5
Binary files /dev/null and b/koha-tmpl/opac-tmpl/prog/images/sprite.png differ