美化知更鸟begin主题分享按钮代码记录

沃森博客 2017年11月25日00:15:10WordPress评论5342阅读模式

美化知更鸟begin主题分享按钮后的效果图如下:

美化知更鸟begin主题分享按钮代码记录

在主题css里面找到如下代码,需要将这段代码替换掉。

  1. /** 喜欢分享 **/  
  2. #social {  
  3.     positionrelative;  
  4.     margin50px auto;  
  5. }  
  6. .social-main {  
  7.     positionrelative;  
  8.     margin: 0 auto;  
  9.     width243px;  
  10. }  
  11. .social-main span {  
  12.     floatleft;  
  13. }  
  14. .social-main a {  
  15.     color#999;  
  16.     line-height36px;  
  17.     border-radius: 2px;  
  18. }  
  19. .share-s a, .shang-s a {  
  20.     text-aligncenter;  
  21. }  
  22. .like a {  
  23.     floatleft;  
  24.     padding-left15px;  
  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.     width120px;  
  34.     displayblock;  
  35.     border1px solid #ddd;  
  36. }  
  37. .share-s a {  
  38.     background#fff;  
  39.     width120px;  
  40.     displayblock;  
  41.     padding-left15px;  
  42.     border1px solid #ddd;  
  43. }  
  44. .social-main i {  
  45.     color#999;  
  46.     margin: 0 5px 0 0;  
  47. }  
  48. /** 赏 **/  
  49. .shang-empty {  
  50.     positionabsolute;  
  51.     left90px;  
  52.     top0px;  
  53.     width62px;  
  54.     height38px;  
  55.     overflowhidden;  
  56. }  
  57. .shang-empty span {  
  58.     background#fff;  
  59.     width60px;  
  60.     height60px;  
  61.     displayblock;  
  62.     margin: -10px 0 0 0;  
  63.     border-radius: 60px;  
  64.     border1px solid #ddd;  
  65. }  
  66. .shang-p a {  
  67.     positionabsolute;  
  68.     background#fff;  
  69.     left96px;  
  70.     top: -5px;  
  71.     width48px;  
  72.     height48px;  
  73.     font-size16px;  
  74.     line-height45px;  
  75.     displayblock;  
  76.     border1px solid #ddd;  
  77.     border-radius: 40px;  
  78.     left101px\9;  
  79.     top: 0\9;  
  80.     width38px\9;  
  81.     height38px\9;  
  82.     line-height35px\9;  
  83. }  
  84. .shang-s {  
  85.     height37px;  
  86. }  
  87. #shang {  
  88.     width280px;  
  89.     displayblock;  
  90. }  
  91. .shang-img {  
  92.     floatleft;  
  93. }  
  94. .shang-img img {  
  95.     width140px;  
  96.     heightauto;  
  97. }  
  98. .shang-main h4 {  
  99.     font-size15px;  
  100.     font-size: 1.5rem;  
  101.     text-aligncenter;  
  102.     margin-bottom10px;  
  103. }  
  104. .shang-main i {  
  105.     color#ff0000;  
  106. }  
  107. /** 分享 **/  
  108. #share {  
  109.     positionabsolute;  
  110.     top: -60px;  
  111.     rightright: -29px;  
  112.     width302px;  
  113.     height68px;  
  114.     displaynone;  
  115.     z-index: 999;  
  116. }  
  117. #share a {  
  118.     floatleft;  
  119.     background#999;  
  120.     font-size20px !important;  
  121.     color#fff;  
  122.     width40px;  
  123.     height40px;  
  124.     line-height40px;  
  125.     margin-left4px;  
  126.     padding-left: 0;  
  127.     text-aligncenter;  
  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.     height250px !important;  
  151. }  
  152. .bd_weixin_popup_foot {  
  153.     displaynone;  
  154. }  

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

  1. /** 喜欢分享 **/  
  2. #social {  
  3.     positionrelative;  
  4.     margin50px auto;  
  5. }  
  6. .social-main {  
  7.     positionrelative;  
  8.     margin: 0 auto;  
  9.     width243px;  
  10. }  
  11. .social-main span {  
  12.     floatleft;  
  13. }  
  14. .social-main a {  
  15.     color#fff;  
  16.     line-height36px;  
  17.     border-radius: 40px;  
  18. }  
  19. .share-s a, .shang-s a {  
  20.     text-aligncenter;  
  21. }  
  22. .like a {  
  23.     floatleft;  
  24.     padding-left15px;  
  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.     width120px;  
  34.     displayblock;  
  35.     border1px solid #ddd;  
  36. }  
  37. .share-s a {  
  38.     background#0000FF;  
  39.     width120px;  
  40.     displayblock;  
  41.     padding-left15px;  
  42.     border1px solid #ddd;  
  43. }  
  44. .social-main i {  
  45.     color#fff;  
  46.     margin: 0 5px 0 0;  
  47. }  
  48. /** 赏 **/  
  49. .shang-empty {  
  50.     positionabsolute;  
  51.     left90px;  
  52.     top0px;  
  53.     width62px;  
  54.     height38px;  
  55.     overflowhidden;  
  56. }  
  57. .shang-empty span {  
  58.     background#fff;  
  59.     width60px;  
  60.     height60px;  
  61.     displayblock;  
  62.     margin: -10px 0 0 0;  
  63.     border-radius: 60px;  
  64.     border1px solid #ddd;  
  65. }  
  66. .shang-p a {  
  67.     positionabsolute;  
  68.     background#ffab2e;  
  69.     left96px;  
  70.     top: -5px;  
  71.     width48px;  
  72.     height48px;  
  73.     font-size16px;  
  74.     line-height45px;  
  75.     displayblock;  
  76.     border1px solid #ddd;  
  77.     border-radius: 40px;  
  78.     left101px\9;  
  79.     top: 0\9;  
  80.     width38px\9;  
  81.     height38px\9;  
  82.     line-height35px\9;  
  83. }  
  84. .shang-s {  
  85.     height37px;  
  86. }  
  87. #shang {  
  88.     width280px;  
  89.     displayblock;  
  90. }  
  91. .shang-img {  
  92.     floatleft;  
  93. }  
  94. .shang-img img {  
  95.     width140px;  
  96.     heightauto;  
  97. }  
  98. .shang-main h4 {  
  99.     font-size15px;  
  100.     font-size: 1.5rem;  
  101.     text-aligncenter;  
  102.     margin-bottom10px;  
  103. }  
  104. .shang-main i {  
  105.     color#ff0000;  
  106. }  
  107. /** 分享 **/  
  108. #share {  
  109.     positionabsolute;  
  110.     top: -60px;  
  111.     rightright: -29px;  
  112.     width302px;  
  113.     height68px;  
  114.     displaynone;  
  115.     z-index: 999;  
  116. }  
  117. #share a {  
  118.     floatleft;  
  119.     background#999;  
  120.     font-size20px  
  121.     color#fff;  
  122.     width40px;  
  123.     height40px;  
  124.     line-height40px;  
  125.     margin-left4px;  
  126.     padding-left: 0;  
  127.     text-aligncenter;  
  128.     border-radius: 20px;  
  129.     background: rgba(128, 128, 128, 0.9);  
  130. }  
  131. #share .be-addbox {  
  132.     color#7ab951;  
  133.     border1px 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.     border1px 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.     colorred;  
  151.     border1px 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.     border1px 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.     border1px 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.     border1px 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.     height250px !important;  
  187. }  
  188. .bd_weixin_popup_foot {  
  189.     displaynone;  
  190. }  

沃森博客
  • 本文由 发表于 2017年11月25日00:15:10
  • 本文来自互利网收集整理,问题反馈联系邮箱:wosnnet@foxmail.com,转载请务必保留本文链接:https://wosn.net/813.html

发表评论