备忘

美化begin主题分享按钮

Begin默认的分享按钮是白色,文章页面背景也是白色,看起来就比较单调,换句话说就是比较丑.我在逛博客的时候发现不少人都自己修改了分享按钮的颜色,看起来好看不少,所以这里也就记录一些修改代码的方式.

在主题style.css里面找到以下代码，我们需要把这段代码替换掉

  2. #social {
  3.     position: relative;
  4.     margin: 50px auto;
  5. }
  6. .social-main {
  7.     position: relative;
  8.     margin: 0 auto;
  9.     width: 243px;
  10. }
  11. .social-main span {
  12.     float: left;
  13. }
  14. .social-main a {
  15.     color: #999;
  16.     line-height: 36px;
  17.     border-radius: 2px;
  18. }
  19. .share-s a, .shang-s a {
  20.     text-align: center;
  21. }
  22. .like a {
  23.     float: left;
  24.     padding-left: 15px;
  25. }
  26. .social-main a:hover {
  27.     background: #f1f1f1;
  28.     color: #444;
  29.     transition: all 0.2s ease-in 0s;
  30. }
  31. .like a {
  32.     background: #fff;
  33.     width: 120px;
  34.     display: block;
  35.     border: 1px solid #ddd;
  36. }
  37. .share-s a {
  38.     background: #fff;
  39.     width: 120px;
  40.     display: block;
  41.     padding-left: 15px;
  42.     border: 1px solid #ddd;
  43. }
  44. .social-main i {
  45.     color: #999;
  46.     margin: 0 5px 0 0;
  47. }
  49. .shang-empty {
  50.     position: absolute;
  51.     left: 90px;
  52.     top: 0px;
  53.     width: 62px;
  54.     height: 38px;
  55.     overflow: hidden;
  56. }
  57. .shang-empty span {
  58.     background: #fff;
  59.     width: 60px;
  60.     height: 60px;
  61.     display: block;
  62.     margin: -10px 0 0 0;
  63.     border-radius: 60px;
  64.     border: 1px solid #ddd;
  65. }
  66. .shang-p a {
  67.     position: absolute;
  68.     background: #fff;
  69.     left: 96px;
  70.     top: -5px;
  71.     width: 48px;
  72.     height: 48px;
  73.     font-size: 16px;
  74.     line-height: 45px;
  75.     display: block;
  76.     border: 1px solid #ddd;
  77.     border-radius: 40px;
  78.     left: 101px\9;
  79.     top: 0\9;
  80.     width: 38px\9;
  81.     height: 38px\9;
  82.     line-height: 35px\9;
  83. }
  84. .shang-s {
  85.     height: 37px;
  86. }
  87. #shang {
  88.     width: 280px;
  89.     display: block;
  90. }
  91. .shang-img {
  92.     float: left;
  93. }
  94. .shang-img img {
  95.     width: 140px;
  96.     height: auto;
  97. }
  98. .shang-main h4 {
  99.     font-size: 15px;
  100.     font-size: 1.5rem;
  101.     text-align: center;
  102.     margin-bottom: 10px;
  103. }
  104. .shang-main i {
  105.     color: #ff0000;
  106. }
  108. #share {
  109.     position: absolute;
  110.     top: -60px;
  111.     rightright: -29px;
  112.     width: 302px;
  113.     height: 68px;
  114.     display: none;
  115.     z-index: 999;
  116. }
  117. #share a {
  118.     float: left;
  119.     background: #999;
  120.     font-size: 20px !important;
  121.     color: #fff;
  122.     width: 40px;
  123.     height: 40px;
  124.     line-height: 40px;
  125.     margin-left: 4px;
  126.     padding-left: 0;
  127.     text-align: center;
  128.     border-radius: 3px;
  129.     background: rgba(128, 128, 128, 0.9);
  130. }
  131. #share .be-addbox:hover {
  132.     background: #7ab951 !important;
  133. }
  134. #share .be-qzone:hover {
  135.     background: #ff7400 !important;
  136. }
  137. #share .be-stsina:hover {
  138.     background: #ff0000 !important;
  139. }
  140. #share .be-tqq:hover {
  141.     background: #46c0e6 !important;
  142. }
  143. #share .be-renren:hover {
  144.     background: #3b68ac !important;
  145. }
  146. #share .be-weixin:hover {
  147.     background: #006f1d !important;
  148. }
  149. .bd_weixin_popup {
  150.     height: 250px !important;
  151. }
  152. .bd_weixin_popup_foot {
  153.     display: none;
  154. }

将其替换成以下代码即可。

  2. #social {
  3.     position: relative;
  4.     margin: 50px auto;
  5. }
  6. .social-main {
  7.     position: relative;
  8.     margin: 0 auto;
  9.     width: 243px;
  10. }
  11. .social-main span {
  12.     float: left;
  13. }
  14. .social-main a {
  15.     color: #fff;
  16.     line-height: 36px;
  17.     border-radius: 40px;
  18. }
  19. .share-s a, .shang-s a {
  20.     text-align: center;
  21. }
  22. .like a {
  23.     float: left;
  24.     padding-left: 15px;
  25. }
  26. .social-main a:hover {
  27.     background: #696969;
  28.     color: #fff;
  29.     transition: all 0.2s ease-in 0s;
  30. }
  31. .like a {
  32.     background: #FF0000;
  33.     width: 120px;
  34.     display: block;
  35.     border: 1px solid #ddd;
  36. }
  37. .share-s a {
  38.     background: #0000FF;
  39.     width: 120px;
  40.     display: block;
  41.     padding-left: 15px;
  42.     border: 1px solid #ddd;
  43. }
  44. .social-main i {
  45.     color: #fff;
  46.     margin: 0 5px 0 0;
  47. }
  49. .shang-empty {
  50.     position: absolute;
  51.     left: 90px;
  52.     top: 0px;
  53.     width: 62px;
  54.     height: 38px;
  55.     overflow: hidden;
  56. }
  57. .shang-empty span {
  58.     background: #fff;
  59.     width: 60px;
  60.     height: 60px;
  61.     display: block;
  62.     margin: -10px 0 0 0;
  63.     border-radius: 60px;
  64.     border: 1px solid #ddd;
  65. }
  66. .shang-p a {
  67.     position: absolute;
  68.     background: #ffab2e;
  69.     left: 96px;
  70.     top: -5px;
  71.     width: 48px;
  72.     height: 48px;
  73.     font-size: 16px;
  74.     line-height: 45px;
  75.     display: block;
  76.     border: 1px solid #ddd;
  77.     border-radius: 40px;
  78.     left: 101px\9;
  79.     top: 0\9;
  80.     width: 38px\9;
  81.     height: 38px\9;
  82.     line-height: 35px\9;
  83. }
  84. .shang-s {
  85.     height: 37px;
  86. }
  87. #shang {
  88.     width: 280px;
  89.     display: block;
  90. }
  91. .shang-img {
  92.     float: left;
  93. }
  94. .shang-img img {
  95.     width: 140px;
  96.     height: auto;
  97. }
  98. .shang-main h4 {
  99.     font-size: 15px;
  100.     font-size: 1.5rem;
  101.     text-align: center;
  102.     margin-bottom: 10px;
  103. }
  104. .shang-main i {
  105.     color: #ff0000;
  106. }
  108. #share {
  109.     position: absolute;
  110.     top: -60px;
  111.     rightright: -29px;
  112.     width: 302px;
  113.     height: 68px;
  114.     display: none;
  115.     z-index: 999;
  116. }
  117. #share a {
  118.     float: left;
  119.     background: #999;
  120.     font-size: 20px
  121.     color: #fff;
  122.     width: 40px;
  123.     height: 40px;
  124.     line-height: 40px;
  125.     margin-left: 4px;
  126.     padding-left: 0;
  127.     text-align: center;
  128.     border-radius: 20px;
  129.     background: rgba(128, 128, 128, 0.9);
  130. }
  131. #share .be-addbox {
  132.     color: #7ab951;
  133.     border: 1px solid #7ab951;
  134.     background: #fff;
  135. }
  136. #share .be-addbox:hover {
  137.     background: #7ab951 !important;
  138.     color: #fff !important;
  139. }
  140. #share .be-qzone {
  141.     color: #ff7400;
  142.     border: 1px solid #ff7400;
  143.     background: #fff;
  144. }
  145. #share .be-qzone:hover {
  146.     background: #ff7400 !important;
  147.     color: #fff !important;
  148. }
  149. #share .be-stsina {
  150.     color: red;
  151.     border: 1px solid red;
  152.     background: #fff;
  153. }
  154. #share .be-stsina:hover {
  155.     background: #ff0000 !important;
  156.     color: #fff !important;
  157. }
  158. #share .be-tqq {
  159.     color: #46c0e6;
  160.     border: 1px solid #46c0e6;
  161.     background: #fff;
  162. }
  163. #share .be-tqq:hover {
  164.     background: #46c0e6 !important;
  165.     color: #fff !important;
  166. }
  167. #share .be-renren {
  168.     color: #3b68ac;
  169.     border: 1px solid #3b68ac;
  170.     background: #fff;
  171. }
  172. #share .be-renren:hover {
  173.     background: #3b68ac !important;
  174.     color: #fff !important;
  175. }
  176. #share .be-weixin {
  177.     color: #006f1d;
  178.     border: 1px solid #006f1d;
  179.     background: #fff;
  180. }
  181. #share .be-weixin:hover {
  182.     background: #00ff43 !important;
  183.     color: #fff !important;
  184. }
  185. .bd_weixin_popup {
  186.     height: 250px !important;
  187. }
  188. .bd_weixin_popup_foot {
  189.     display: none;
  190. }

以上就是美化喜欢分享按钮的代码,使用其他主题的也可以参考使用.

相关推荐

1 条评论

发表评论