@@ -, +, @@ --- 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 --- a/koha-tmpl/opac-tmpl/prog/en/css/opac.css +++ a/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; --- a/koha-tmpl/opac-tmpl/prog/en/modules/opac-suggestions.tt +++ a/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 %]