All geek questions in one place

Social help css

I use gem social-share-buttonwith Bootstrap 2.0 in my Ruby on Rails application, but the text overlaps the icons, please help if someone can solve the problem using css share buttons-image

Thanks in advance!

(function() {
  window.SocialShareButton = {
    openUrl: function(url) {
      window.open(url);
      return false;
    },
    share: function(el) {
      var $parent, appkey, desc, get_tumblr_extra, img, site, title, tumblr_params, url, via;
      site = $(el).data('site');
      appkey = $(el).data('appkey') || '';
      $parent = $(el).parent();
      title = encodeURIComponent($parent.data('title') || '');
      img = encodeURIComponent($parent.data("img") || '');
      url = encodeURIComponent($parent.data("url") || '');
      via = encodeURIComponent($parent.data("via") || '');
      desc = encodeURIComponent($parent.data("desc") || ' ');
      if (url.length === 0) {
        url = encodeURIComponent(location.href);
      }
      switch (site) {
        case "email":
          location.href = "mailto:?to=&subject=" + title + "&body=" + url;
          break;
        case "weibo":
          SocialShareButton.openUrl("http://service.weibo.com/share/share.php?url=" + url + "&type=3&pic=" + img + "&title=" + title + "&appkey=" + appkey);
          break;
        case "twitter":
          SocialShareButton.openUrl("https://twitter.com/intent/tweet?url=" + url + "&text=" + title + "&via=" + via);
          break;
        case "douban":
          SocialShareButton.openUrl("http://shuo.douban.com/!service/share?href=" + url + "&name=" + title + "&image=" + img + "&sel=" + desc);
          break;
        case "facebook":
          SocialShareButton.openUrl("http://www.facebook.com/sharer.php?u=" + url);
          break;
        case "qq":
          SocialShareButton.openUrl("http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" + url + "&title=" + title + "&pics=" + img + "&summary=" + desc + "&site=" + appkey);
          break;
        case "tqq":
          SocialShareButton.openUrl("http://share.v.t.qq.com/index.php?c=share&a=index&url=" + url + "&title=" + title + "&pic=" + img + "&appkey=" + appkey);
          break;
        case "baidu":
          SocialShareButton.openUrl("http://hi.baidu.com/pub/show/share?url=" + url + "&title=" + title + "&content=" + desc);
          break;
        case "kaixin001":
          SocialShareButton.openUrl("http://www.kaixin001.com/rest/records.php?url=" + url + "&content=" + title + "&style=11&pic=" + img + "&aid=" + appkey);
          break;
        case "renren":
          SocialShareButton.openUrl("http://widget.renren.com/dialog/share?resourceUrl=" + url + "&srcUrl=" + url + "&title=" + title + "&pic=" + img + "&description=" + desc);
          break;
        case "google_plus":
          SocialShareButton.openUrl("https://plus.google.com/share?url=" + url);
          break;
        case "google_bookmark":
          SocialShareButton.openUrl("https://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + url + "&title=" + title);
          break;
        case "delicious":
          SocialShareButton.openUrl("http://www.delicious.com/save?url=" + url + "&title=" + title + "&jump=yes&pic=" + img);
          break;
        case "plurk":
          SocialShareButton.openUrl("http://www.plurk.com/?status=" + title + ": " + url + "&qualifier=shares");
          break;
        case "pinterest":
          SocialShareButton.openUrl("http://www.pinterest.com/pin/create/button/?url=" + url + "&media=" + img + "&description=" + title);
          break;
        case "tumblr":
          get_tumblr_extra = function(param) {
            var cutom_data;
            cutom_data = $(el).attr("data-" + param);
            if (cutom_data) {
              return encodeURIComponent(cutom_data);
            }
          };
          tumblr_params = function() {
            var params, path, quote, source;
            path = get_tumblr_extra('type') || 'link';
            params = (function() {
              switch (path) {
                case 'text':
                  title = get_tumblr_extra('title') || title;
                  return "title=" + title;
                case 'photo':
                  title = get_tumblr_extra('caption') || title;
                  source = get_tumblr_extra('source') || img;
                  return "caption=" + title + "&source=" + source;
                case 'quote':
                  quote = get_tumblr_extra('quote') || title;
                  source = get_tumblr_extra('source') || '';
                  return "quote=" + quote + "&source=" + source;
                default:
                  title = get_tumblr_extra('title') || title;
                  url = get_tumblr_extra('url') || url;
                  return "name=" + title + "&url=" + url;
              }
            })();
            return "/" + path + "?" + params;
          };
          SocialShareButton.openUrl("http://www.tumblr.com/share" + (tumblr_params()));
      }
      return false;
    }
  };

}).call(this);
/*

        Creating a sprite from following images:

        app/assets/images/sprites/social-share-button/baidu.png (16x16)
        app/assets/images/sprites/social-share-button/delicious.png (16x16)
        app/assets/images/sprites/social-share-button/douban.png (16x16)
        app/assets/images/sprites/social-share-button/email.png (16x16)
        app/assets/images/sprites/social-share-button/facebook.png (16x16)
        app/assets/images/sprites/social-share-button/flickr.png (16x16)
        app/assets/images/sprites/social-share-button/google_bookmark.png (16x16)
        app/assets/images/sprites/social-share-button/google_plus.png (16x16)
        app/assets/images/sprites/social-share-button/kaixin001.png (16x16)
        app/assets/images/sprites/social-share-button/pinterest.png (16x16)
        app/assets/images/sprites/social-share-button/plurk.png (16x16)
        app/assets/images/sprites/social-share-button/qq.png (16x16)
        app/assets/images/sprites/social-share-button/renren.png (16x16)
        app/assets/images/sprites/social-share-button/tqq.png (16x16)
        app/assets/images/sprites/social-share-button/tumblr.png (16x16)
        app/assets/images/sprites/social-share-button/twitter.png (16x16)
        app/assets/images/sprites/social-share-button/weibo.png (16x16)

        Output files:
          app/assets/images/sprites/social-share-button.png
          app/assets/stylesheets/social-share-button.scss

        Output size:
          80x64

*/

/* line 32, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */

.social-share-button-baidu {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/sprites/social-share-button.png") 0px 0px no-repeat;
}
/* line 33, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */

.social-share-button-delicious {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/sprites/social-share-button.png") -16px 0px no-repeat;
}
/* line 34, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */

.social-share-button-douban {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/sprites/social-share-button.png") 0px -16px no-repeat;
}
/* line 35, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */

.social-share-button-email {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/sprites/social-share-button.png") -16px -16px no-repeat;
}
/* line 36, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */

.social-share-button-facebook {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/sprites/social-share-button.png") -32px 0px no-repeat;
}
/* line 37, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */

.social-share-button-flickr {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/sprites/social-share-button.png") -32px -16px no-repeat;
}
/* line 38, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */

.social-share-button-google_bookmark {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/sprites/social-share-button.png") 0px -32px no-repeat;
}
/* line 39, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */

.social-share-button-google_plus {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/sprites/social-share-button.png") -16px -32px no-repeat;
}
/* line 40, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */

.social-share-button-kaixin001 {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/sprites/social-share-button.png") -32px -32px no-repeat;
}
/* line 41, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */

.social-share-button-pinterest {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/sprites/social-share-button.png") -48px 0px no-repeat;
}
/* line 42, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */

.social-share-button-plurk {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/sprites/social-share-button.png") -48px -16px no-repeat;
}
/* line 43, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */

.social-share-button-qq {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/sprites/social-share-button.png") -48px -32px no-repeat;
}
/* line 44, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */

.social-share-button-renren {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/sprites/social-share-button.png") 0px -48px no-repeat;
}
/* line 45, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */

.social-share-button-tqq {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/sprites/social-share-button.png") -16px -48px no-repeat;
}
/* line 46, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */

.social-share-button-tumblr {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/sprites/social-share-button.png") -32px -48px no-repeat;
}
/* line 47, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */

.social-share-button-twitter {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/sprites/social-share-button.png") -48px -48px no-repeat;
}
/* line 48, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */

.social-share-button-weibo {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/sprites/social-share-button.png") -64px 0px no-repeat;
}
@media only screen and (-webkit-device-pixel-ratio: 2) {
  /* line 51, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
  .social-share-button-baidu {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/assets/sprites/social-share-button@2x.png") 0px 0px no-repeat;
    background-size: 80px 64px;
  }
  /* line 52, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
  .social-share-button-delicious {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/assets/sprites/social-share-button@2x.png") -16px 0px no-repeat;
    background-size: 80px 64px;
  }
  /* line 53, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
  .social-share-button-douban {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/assets/sprites/social-share-button@2x.png") 0px -16px no-repeat;
    background-size: 80px 64px;
  }
  /* line 54, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
  .social-share-button-email {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/assets/sprites/social-share-button@2x.png") -16px -16px no-repeat;
    background-size: 80px 64px;
  }
  /* line 55, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
  .social-share-button-facebook {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/assets/sprites/social-share-button@2x.png") -32px 0px no-repeat;
    background-size: 80px 64px;
  }
  /* line 56, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
  .social-share-button-flickr {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/assets/sprites/social-share-button@2x.png") -32px -16px no-repeat;
    background-size: 80px 64px;
  }
  /* line 57, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
  .social-share-button-google_bookmark {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/assets/sprites/social-share-button@2x.png") 0px -32px no-repeat;
    background-size: 80px 64px;
  }
  /* line 58, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
  .social-share-button-google_plus {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/assets/sprites/social-share-button@2x.png") -16px -32px no-repeat;
    background-size: 80px 64px;
  }
  /* line 59, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
  .social-share-button-kaixin001 {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/assets/sprites/social-share-button@2x.png") -32px -32px no-repeat;
    background-size: 80px 64px;
  }
  /* line 60, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
  .social-share-button-pinterest {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/assets/sprites/social-share-button@2x.png") -48px 0px no-repeat;
    background-size: 80px 64px;
  }
  /* line 61, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
  .social-share-button-plurk {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/assets/sprites/social-share-button@2x.png") -48px -16px no-repeat;
    background-size: 80px 64px;
  }
  /* line 62, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
  .social-share-button-qq {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/assets/sprites/social-share-button@2x.png") -48px -32px no-repeat;
    background-size: 80px 64px;
  }
  /* line 63, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
  .social-share-button-renren {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/assets/sprites/social-share-button@2x.png") 0px -48px no-repeat;
    background-size: 80px 64px;
  }
  /* line 64, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
  .social-share-button-tqq {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/assets/sprites/social-share-button@2x.png") -16px -48px no-repeat;
    background-size: 80px 64px;
  }
  /* line 65, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
  .social-share-button-tumblr {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/assets/sprites/social-share-button@2x.png") -32px -48px no-repeat;
    background-size: 80px 64px;
  }
  /* line 66, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
  .social-share-button-twitter {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/assets/sprites/social-share-button@2x.png") -48px -48px no-repeat;
    background-size: 80px 64px;
  }
  /* line 67, /home/yuva/.rvm/gems/ruby-2.0.0-p247/gems/social-share-button-0.1.8/app/assets/stylesheets/social-share-button.scss */
  .social-share-button-weibo {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/assets/sprites/social-share-button@2x.png") -64px 0px no-repeat;
    background-size: 80px 64px;
  }
}
<p>Below is the div in which I was getting issue all css and js are taken from gem source files The images cant be shown as I can't add gem images to this fiddle
</p>

<div class='social-share-button' data-title='26 jul y            blog' data-img='' data-url='http://localhost:3000/blog/26 jul y            blog' data-desc=''>
  <a class="social-share-button-twitter" data-site="twitter" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to
  ">Share To</span>"></a>
  <a class="social-share-button-facebook" data-site="facebook" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to
  ">Share To</span>"></a>
  <a class="social-share-button-google_plus" data-site="google_plus" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to
  ">Share To</span>"></a>
  <a class="social-share-button-weibo" data-site="weibo" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to ">Share To</span>"></a>
  <a class="social-share-button-douban" data-site="douban" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to ">Share To</span>"></a>
  <a class="social-share-button-tqq" data-site="tqq" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to ">Share To</span>"></a>
  <a class="social-share-button-renren" data-site="renren" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to ">Share To</span>"></a>
  <a class="social-share-button-baidu" data-site="baidu" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to ">Share To</span>"></a>
  <a class="social-share-button-huaban" data-site="huaban" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to ">Share To</span>"></a>
  <a class="social-share-button-tumblr" data-site="tumblr" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to ">Share To</span>"></a>
  <a class="social-share-button-pinterest" data-site="pinterest" href="#" onclick="return SocialShareButton.share(this);" rel="nofollow " title="<span class=" translation_missing " title="translation missing: cn.social_share_button.share_to
  ">Share To</span>"></a>
</div>
Run codeHide result
+4
source share
1 answer

The problem is with the overlapping Share text so that you can hide the text by making it opacity 0. Just add this css snippet

.social-share-button a {
  color: rgba(225,225,225,0) !important;
}
+3
source

Source: https://habr.com/ru/post/1612046/

More articles:


All Articles