知更鸟Begin主题打赏、分享、点赞按钮美化 —— WordPress美化

2017年9月4日22:34:28 60 5,589
摘要

近日去一些博客闲逛,发现他们的打赏分享点赞按钮比知更鸟Begin主题自带的要好看,心里痒痒,在堆爱博客博主的帮助下,终于美化成功,效果见下图:

 

知更鸟Begin主题打赏、分享、点赞按钮美化 —— WordPress美化

 

代码部署:

用Notepad++打开知更鸟Begin主题(5.2版本)样式表 (style.css),大概在6269行(不同版本的主题,也许行数不一样),找到下面的代码

  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.    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. }
  155. /** 弹窗 **/
  156. .fancybox-wrap {
  157.    position: absolute;
  158.    top: 0;
  159.    left: 0;
  160.    z-index: 8020;
  161. }
  162. .fancybox-skin {
  163.    position: relative;
  164.    background: #fff;
  165.    color: #444;
  166.    text-shadow: none;
  167.    border-radius: 4px;
  168. }
  169. .fancybox-opened {
  170.    z-index: 8030;
  171. }
  172. .fancybox-opened .fancybox-skin {
  173.    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
  174. }
  175. .fancybox-outer, .fancybox-inner {
  176.    position: relative;
  177. }
  178. .fancybox-inner {
  179.    overflow: hidden;
  180. }
  181. .fancybox-error {
  182.    padding: 30px;
  183.    whitewhite-space: nowrap;
  184. }
  185. .fancybox-image, .fancybox-iframe {
  186.    display: block;
  187.    width: 100%;
  188.    height: 100%;
  189. }
  190. .fancybox-image {
  191.    max-width: 100%;
  192.    max-height: 100%;
  193. }
  194. #fancybox-loading {
  195.    position: fixed;
  196.    top: 50%;
  197.    left: 50%;
  198.    margin: -22px 0 0 -22px;
  199.    z-index: 8060;
  200. }
  201. #fancybox-loading div {
  202.    width: 79px;
  203.    height: 10px;
  204.    background: url(img/infinite.gif) center center no-repeat;
  205. }
  206. .fancybox-nav {
  207.    position: absolute;
  208.    top: 0;
  209.    width: 45%;
  210.    height: 100%;
  211.    cursor: pointer;
  212.    background: transparent url(img/blank.gif);
  213. /* helps IE */
  214.    -webkit-tap-highlight-color: rgba(0,0,0,0);
  215.    z-index: 8040;
  216. }
  217. .fancybox-prev {
  218.    left: 0;
  219. }
  220. .fancybox-next {
  221.    rightright: 0;
  222. }
  223. .fancybox-nav span {
  224.    position: absolute;
  225.    top: 50%;
  226.    width: 30px;
  227.    height: 30px;
  228.    margin-top: -18px;
  229.    cursor: pointer;
  230.    z-index: 8040;
  231.    visibility: hidden;
  232. }
  233. .fancybox-nav .be {
  234.    font-size: 30px !important;
  235. }
  236. .fancybox-prev span {
  237.    left: 10px;
  238. }
  239. .fancybox-next span {
  240.    rightright: 10px;
  241. }
  242. .fancybox-nav:hover span {
  243.    visibility: visible;
  244. }
  245. .fancybox-tmp {
  246.    position: absolute;
  247.    top: -99999px;
  248.    left: -99999px;
  249.    visibility: hidden;
  250.    max-width: 99999px;
  251.    max-height: 99999px;
  252.    overflow: visible !important;
  253. }
  254. .fancybox-overlay {
  255.    position: absolute;
  256.    top: 0;
  257.    left: 0;
  258.    overflow: hidden;
  259.    display: none;
  260.    z-index: 8010;
  261.    background: url(img/fancy.png);
  262. }
  263. .fancybox-overlay-fixed {
  264.    position: fixed;
  265.    bottombottom: 0;
  266.    rightright: 0;
  267. }
  268. .fancybox-overlay {
  269.    overflow: auto;
  270.    overflow-y: scroll;
  271. }
  272. #fancybox-buttons {
  273.    position: fixed;
  274.    left: 0;
  275.    width: 100%;
  276.    z-index: 8050;
  277. }
  278. #fancybox-buttons.top {
  279.    top: 10px;
  280. }
  281. #fancybox-buttons.bottombottom {
  282.    bottombottom: 10px;
  283. }
  284. #fancybox-buttons ul {
  285.    background: #000;
  286.    background: rgba(0, 0, 0, 0.1);
  287.    display: block;
  288.    width: 177px;
  289.    height: 31px;
  290.    margin: 0 auto;
  291.    border: 1px solid #999;
  292.    border-radius: 2px;
  293. }
  294. #fancybox-buttons ul li {
  295.    float: left;
  296.    margin: 0;
  297.    padding: 0;
  298. }
  299. #fancybox-buttons a {
  300.    display: block;
  301.    color: #fff;
  302.    width: 35px;
  303.    height: 30px;
  304.    line-height: 30px;
  305.    text-align: center;
  306.    outline: none;
  307. }
  308. #fancybox-buttons a:hover {
  309.    color: #04a4cc;
  310. }
  311. #fancybox-buttons .be {
  312.    font-size: 15px !important;
  313. }
  314. #fancybox-buttons .be-arrowright {
  315.    border-right: 1px solid #999;
  316. }
  317. #fancybox-buttons .be-cross {
  318.    border-left: 1px solid #999;
  319. }
  320. .btnDisabled {
  321.    cursor: default;
  322.    opacity: 0.4;
  323.    filter: alpha(opacity=40);
  324. }
  325. .icon-fancy-close {
  326.    position: absolute;
  327.    top: -20px;
  328.    rightright: -20px;
  329.    width: 24px;
  330.    height: 24px;
  331.    color: #e50000;
  332.    font-size: 18px;
  333.    line-height: 24px;
  334.    cursor: pointer;
  335. }
  336. .fancybox-close {
  337.    position: absolute;
  338.    background: #cf0000;
  339.    top: -25px;
  340.    rightright: 0;
  341.    color: #fff;
  342.    padding: 0 8px;
  343.    border-radius: 5px 5px 0 0;
  344. }
  345. .fancybox-close:hover {
  346.    color: #ccc;
  347. }

 

知更鸟Begin主题打赏、分享、点赞按钮美化 —— WordPress美化

原主题:打赏、分享、点赞按钮

 

修改成以下

此处为隐藏的内容!
发表评论并刷新,方可查看

 

美化后的效果图

知更鸟Begin主题打赏、分享、点赞按钮美化 —— WordPress美化

 

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的QQ
  • QQ扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin

发表评论

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

目前评论:60   其中:访客  60   博主  0

    • Founa Founa 0 来自天朝的朋友 广东省深圳市 电信

      很不错 棒棒哒

      • MEI MEI 0 来自天朝的朋友 重庆市 电信

        很不错的分享,谢谢博主。但点击社交分享按钮会跳出登陆界面不是分享内容界面,不知是不是手机浏览器问题(小米手机自带浏览器)

        • jiaowa.ren jiaowa.ren 3 来自天朝的朋友 江苏省南京市 移动

          • 逗比小王 逗比小王 1 来自天朝的朋友 陕西省汉中市 电信

            妈的好看

            • 6666 6666 2 来自天朝的朋友 陕西省汉中市 电信

              66666啊

              • 软件库 软件库 1 来自天朝的朋友 谷歌浏览器 Windows 7 河南省郑州市 联通

                看看

                • C_L C_L 1 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 联通

                  666啊

                  • 21312 21312 2 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信

                    不错哦

                    • 靖 2 来自天朝的朋友 谷歌浏览器 Windows 10 陕西省西安市 电信

                      学习学习

                      • 浪遏飞舟 浪遏飞舟 1 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信

                        支持

                        • 等你 等你 0 来自天朝的朋友 搜狗浏览器 Windows 7 江苏省苏州市 电信

                          感谢博主的分享

                          • 云飞 云飞 0 来自天朝的朋友 搜狗浏览器 Windows 7 江苏省苏州市 电信

                            这个美化的很好看,收藏一个

                            • 我阿里了 我阿里了 0 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信

                              我来了

                              • 菜虚空 菜虚空 0 来自天朝的朋友 谷歌浏览器 Windows 7 河南省郑州市 联通

                                学习学习

                                • 知道眼泪 知道眼泪 1 来自天朝的朋友 谷歌浏览器 Windows 10 陕西省西安市 电信

                                  很好看啊

                                  • 北陌 北陌 2 来自天朝的朋友 谷歌浏览器 Windows 10 河南省郑州市 联通

                                    挺好的

                                    • 清逸 清逸 0 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省武汉市 联通

                                      学习

                                      • xer xer 1 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信

                                        厉害