知更鸟主题修改文章底部点赞分享按钮颜色

2018年8月7日15:22:57 11 3,672

知更鸟主题修改文章底部点赞分享按钮颜色

有的小伙伴,比较喜欢文章底部的点赞、分享按钮彩色式样的,星光博主也是如此。

在学习了多家知更鸟主题系列的网站后最终实现了,现将代码分享下。

修改后的小伙伴们,有没有效果,请在评论区留言下,也给我和大家个参考。我就不设置回复可见了,谢谢大家!

效果如下图。

知更鸟主题修改文章底部点赞分享按钮颜色

知更鸟主题修改文章底部点赞分享按钮颜色

打开Style.css,查找以下代码

  1. /** 喜欢分享 **/
  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. }
  48. /** 赏 **/
  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. }
  107. /** 分享 **/
  108. #share {
  109.     position: absolute;
  110.     top: -60px;
  111.     right: -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(1281281280.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. }

将以上代码全部进行替换, 新代码如下

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

替换完成,即可实现你想要的效果!

weinxin
星光博客 站长语录
星光博客,欢迎各位来访!这是我的QQ,扫一扫,加好友。大家一起交流博客建站技术,分享前沿资讯!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:11   其中:访客  7   博主  4

    • 小白兔 小白兔 1 来自天朝的朋友 谷歌浏览器 Windows 10 北京市海淀区 联通

      留言,留言,留言咯

      • 网站建设 网站建设 3 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 电信

        打卡 :cry: :cry: :cry:

        • 免费pos机 免费pos机 1 来自天朝的朋友 谷歌浏览器 Windows 10 湖南省长沙市 电信

          请教没有style.css这个文件咋办

            • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Windows 7 山东省潍坊市 联通

              @免费pos机 这个CSS是知更鸟主题必备的,你再仔细找找。

            • 小四 小四 3 来自天朝的朋友 谷歌浏览器 Windows 10 河南省安阳市 移动

              修改没有用啊

                • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Windows 7 山东省潍坊市 联通

                  @小四 今天看到最多的评论是“没有效果” :evil: 可能是方法不实用吧,或者你再研究下……有时候代码不是套上后就能出现效果的,可能需要修改下

                    • 小四 小四 3 来自天朝的朋友 谷歌浏览器 Windows 10 河南省安阳市 移动

                      @BG4PGR 难受啊,有一部分代码没有效果,不知道为什么

                  • MAY网络营销 MAY网络营销 3 来自天朝的朋友 谷歌浏览器 Windows 10 上海市 联通

                    我还是比较喜欢主题自带的简洁样式

                      • BG4PGR BG4PGR  博主 来自天朝的朋友 谷歌浏览器  EDI-AL10 Build/HUAWEIEDISON-AL10 山东省潍坊市 联通

                        @MAY网络营销 星光还是喜欢带点颜色的,看起来很美丽。最新版主题分享已经逐渐开始美化了

                      • 想念某年某月某一天 想念某年某月某一天 1 来自天朝的朋友 火狐浏览器 Windows 7 广东省东莞市 电信

                        帮博主加加人气,确实不错,帮了我很多、谢谢!

                          • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Windows 10 中国 移动

                            @想念某年某月某一天 客气了,大家都是有相同爱好之人,之间相互学习吧。