Bug 7500 [FOLLOW-UP, revised][Social networks] Use CSS Sprites for faster page loading

This patch adds a new sprite image for social network links.
The page markup has been modified to accommodate the image-
replacement technique used to display the images.

When testing be sure to clear your cache to load the new CSS.

Revision: Rebased, and unused social network images removed.

koha-tmpl/opac-tmpl/prog/en/css/opac.css

@@ -2468,6 +2468,48 @@ span.sep {
 .ui-autocomplete-loading { background: #FFF url("../../img/loading-small.gif") right center no-repeat; }
 .ui-menu li { list-style:none; }
 
+#social_networks span {
+    color: #274D7F;
+    display : block;
+    float : left;
+    font-size: 85%;
+    font-weight: bold;
+    line-height: 2em;
+    margin : .5em 0 .5em .5em !important;
+}
+#social_networks a {
+    background: transparent url("../../images/social-sprite.png") no-repeat;
+    display: block;
+    height : 20px !important;
+    width : 20px;
+    text-indent : -999em;
+}
+
+#social_networks div {
+    float : left !important;
+    margin : .5em 0 .5em .2em !important;
+}
+
+#social_networks #facebook {
+    background-position : -7px -35px;
+}
+
+#social_networks #twitter {
+    background-position : -7px -5px;
+}
+
+#social_networks #linkedin {
+    background-position : -7px -95px;
+}
+
+#social_networks #delicious {
+    background-position : -7px -66px;
+}
+
+#social_networks #email {
+    background-position : -7px -126px;
+}
+
 /* jQuery UI standard tabs */
 .ui-tabs-nav .ui-tabs-selected a,
 .ui-tabs-nav a:hover,
@@ -2491,6 +2533,7 @@ span.sep {
     font-family : inherit;
     font-size : inherit;
 }
+
 ul.ui-tabs-nav li {
     list-style : none;
 }

koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tt

@@ -1200,14 +1200,14 @@ YAHOO.util.Event.onContentReady("furtherm", function () {
 [% END %]
 
 [% IF ( SocialNetworks ) %]
-    <div class="social_networks">
+    <div id="social_networks">
         <span>Share</span>
-        <a href="http://www.facebook.com/sharer.php?u=[% current_url |url %]&amp;t=[% title |url %]" title="Share on Facebook"><img alt="Share on Facebook" src="/opac-tmpl/prog/images/socnet/facebook16.png" /></a>
-        <a href="http://twitter.com/share" title="Share on Twitter"><img alt="Share on Twitter" src="/opac-tmpl/prog/images/socnet/twitter16.png" /></a>
-        <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=[% current_url |url %]&amp;title=[% title |url %]" title="Share on LinkedIn"><img alt="Share on LinkedIn" src="/opac-tmpl/prog/images/socnet/linkedin16.png" /></a>
-        <a href="http://www.delicious.com/save?url=[% current_url |url %]&amp;title=[% title |url %]" title="Share on Delicious"><img alt="Share on Delicious" src="/opac-tmpl/prog/images/socnet/delicious16.gif" /></a>
-        <g:plusone size="small"></g:plusone>
-        <a href="mailto:?subject=[% title %]&amp;body=[% title %] ([% current_url |url %])" title="Share by email"><img alt="Share by email" src="/opac-tmpl/prog/images/socnet/mailto16.png" /></a>
+        <div><a id="facebook" href="http://www.facebook.com/sharer.php?u=[% current_url |url %]&amp;t=[% title |url %]" title="Share on Facebook">Facebook</a></div>
+        <div><a id="twitter" href="http://twitter.com/share" title="Share on Twitter">Twitter</a></div>
+        <div><a id="linkedin" href="http://www.linkedin.com/shareArticle?mini=true&amp;url=[% current_url |url %]&amp;title=[% title |url %]" title="Share on LinkedIn">LinkedIn</a></div>
+        <div><a id="delicious" href="http://www.delicious.com/save?url=[% current_url |url %]&amp;title=[% title |url %]" title="Share on Delicious">Delicious</a></div>
+        <div><a id="email" href="mailto:?subject=[% title %]&amp;body=[% title %] ([% current_url |url %])" title="Share by email">Email</a></div>
+        <div><g:plusone size="small"></g:plusone></div>
     </div>
 [% END %]