1. 首页
  2. 网站建设
  3. WordPress

去看你博客知更鸟主题美化记录文章

去看你博客知更鸟主题美化教程文章

博主是个喜欢折腾的人,看久了自己博客的样式就想着要换一换,于是便从网络上收集知更鸟主题的美化教程,此篇为记录博主这次更改的网站样式作为备忘。

首先,如果你也想给你的博客折腾以下修改样式,请记住:

  1. 网站做好备份
  2. 网站做好备份
  3. 网站做好备份

重要的事情说三遍,因为我就没有备份而导致出现一个问题后全站又恢复原样。

下面开始记录这次折腾的内容:

1.更换知更鸟主题文章内分享按钮

更换知更鸟主题文章内分享按钮
美化效果

更改教程:打开主题内style.css文件替换下面样式代码:

原代码:[s][p]

  1. /** 分享 **/
  2. #share {
  3.     positionabsolute;
  4.     top: –60px;
  5.     rightright: –29px;
  6.     width302px;
  7.     height68px;
  8.     displaynone;
  9.     z-index: 999;
  10. }
  11. #share a {
  12.     floatleft;
  13.     background#999;
  14.     font-size20px !important;
  15.     color#fff;
  16.     width40px;
  17.     height40px;
  18.     line-height40px;
  19.     margin-left4px;
  20.     padding-left: 0;
  21.     text-aligncenter;
  22.     border-radius: 3px;
  23.     background: rgba(128, 128, 128, 0.9);
  24. }
  25. #share .be-addbox:hover {
  26.     background#7ab951 !important;
  27. }
  28. #share .be-qzone:hover {
  29.     background#ff7400 !important;
  30. }
  31. #share .be-stsina:hover {
  32.     background#ff0000 !important;
  33. }
  34. #share .be-tqq:hover {
  35.     background#46c0e6 !important;
  36. }
  37. #share .be-renren:hover {
  38.     background#3b68ac !important;
  39. }
  40. #share .be-weixin:hover {
  41.     background#006f1d !important;
  42. }
  43. .bd_weixin_popup {
  44.     height250px !important;
  45. }
  46. .bd_weixin_popup_foot {
  47.     displaynone;
  48. }

[/p]

更改为:[s][p]

  1. /** 分享 **/
  2. #share {
  3.     positionabsolute;
  4.     top: –60px;
  5.     rightright: –29px;
  6.     width302px;
  7.     height68px;
  8.     displaynone;
  9.     z-index: 999;
  10. }
  11. #share a {
  12.     floatleft;
  13.     background#999;
  14.     font-size20px !important;
  15.     color#fff;
  16.     width40px;
  17.     height40px;
  18.     line-height40px;
  19.     margin-left4px;
  20.     padding-left: 0;
  21.     text-aligncenter;
  22.     border-radius: 20px;
  23.     background: rgba(128, 128, 128, 0.9);
  24. }
  25. #share .be-addbox {
  26.     color#7ab951;
  27.     border1px solid #7ab951;
  28.     background#fff;
  29. }
  30. #share .be-addbox:hover {
  31.     background#7ab951 !important;
  32.     color#fff !important;
  33. }
  34. #share .be-qzone {
  35.     color#ff7400;
  36.     border1px solid #ff7400;
  37.     background#fff;
  38. }
  39. #share .be-qzone:hover {
  40.     background#ff7400 !important;
  41.     color#fff !important;
  42. }
  43. #share .be-stsina {
  44.     colorred;
  45.     border1px solid red;
  46.     background#fff;
  47. }
  48. #share .be-stsina:hover {
  49.     background#ff0000 !important;
  50.     color#fff !important;
  51. }
  52. #share .be-tqq {
  53.     color#46c0e6;
  54.     border1px solid #46c0e6;
  55.     background#fff;
  56. }
  57. #share .be-tqq:hover {
  58.     background#46c0e6 !important;
  59.     color#fff !important;
  60. }
  61. #share .be-renren {
  62.     color#3b68ac;
  63.     border1px solid #3b68ac;
  64.     background#fff;
  65. }
  66. #share .be-renren:hover {
  67.     background#3b68ac !important;
  68.     color#fff !important;
  69. }
  70. #share .be-weixin {
  71.     color#006f1d;
  72.     border1px solid #006f1d;
  73.     background#fff;
  74. }
  75. #share .be-weixin:hover {
  76.     background#006f1d !important;
  77.     color#fff !important;
  78. }
  79. .bd_weixin_popup {
  80.     height250px !important;
  81. }
  82. .bd_weixin_popup_foot {
  83.     displaynone;
  84. }

[/p]

2.评论头像框方形变圆形

评论头像框方形变圆形
美化效果

原代码:[s][p]

  1. .vcard .avatar {
  2.     floatleft;
  3.     width64px;
  4.     height64px;
  5.     margin7px 10px 0 0;
  6.     padding3px;
  7.     border-radius: 5px;
  8.     border1px solid #ddd;
  9.     transition: all 0.8s ease 0s;
  10. }

[/p]

更改为:[s][p]

  1. .vcard .avatar {
  2.     floatleft;
  3.     width64px;
  4.     height64px;
  5.     margin7px 10px 0 0;
  6.     padding3px;
  7.     border-radius: 34px;
  8.     border1px solid #ddd;
  9.     transition: all 0.8s ease 0s;
  10. }

[/p]

3.给知更鸟主题首页加上日期和问候语

给知更鸟主题首页加上日期和问候语
效果图

修改教程(点击进入)

4.“提交评论”按钮美化

“提交评论”按钮美化
美化效果

将下面代码覆盖原有样式:[s][p]

  1. #respon#submit {
  2.     background#38a3fd;
  3.     width: 15%;
  4.     margin5px 0 15px 0;
  5.     padding8px;
  6.     cursorpointer;
  7.     border1px solid #ddd;
  8.     border-radius: 19px;
  9.     -webkit-appearance: none;
  10.     color#fff;
  11.     box-shadow: 0 6px 10px #38a3fd50;
  12. }

[/p]

5.知更鸟主题首页阅读全文按钮美化

知更鸟主题首页阅读全文按钮美化效果图
效果图(点开图片看动图)

修改教程(点击进入)

6.WordPress9款链接跳转页面美化

7.Wordpress知更鸟主题海报分享功能

未完待续。。。

去看你博客原创文章,作者:去看你博客,如若转载,请注明出处:https://www.7kanni.cn/1046.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论列表(4条)