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

作者 : 去看你博客 本文共3798个字,预计阅读时间需要10分钟 发布时间: 2019-04-24 共1.68K人阅读

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

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

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

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

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

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

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

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

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

原代码:

/** 分享 **/
#share {
    position: absolute;
    top: -60px;
    rightright: -29px;
    width: 302px;
    height: 68px;
    display: none;
    z-index: 999;
}

#share a {
    float: left;
    background: #999;
    font-size: 20px !important;
    color: #fff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-left: 4px;
    padding-left: 0;
    text-align: center;
    border-radius: 3px;
    background: rgba(128, 128, 128, 0.9);
}

#share .be-addbox:hover {
    background: #7ab951 !important;
}

#share .be-qzone:hover {
    background: #ff7400 !important;
}

#share .be-stsina:hover {
    background: #ff0000 !important;
}

#share .be-tqq:hover {
    background: #46c0e6 !important;
}

#share .be-renren:hover {
    background: #3b68ac !important;
}

#share .be-weixin:hover {
    background: #006f1d !important;
}

.bd_weixin_popup {
    height: 250px !important;
}
.bd_weixin_popup_foot {
    display: none;
}

更改为:

/** 分享 **/
#share {
    position: absolute;
    top: -60px;
    rightright: -29px;
    width: 302px;
    height: 68px;
    display: none;
    z-index: 999;
}
#share a {
    float: left;
    background: #999;
    font-size: 20px !important;
    color: #fff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-left: 4px;
    padding-left: 0;
    text-align: center;
    border-radius: 20px;
    background: rgba(128, 128, 128, 0.9);
}
#share .be-addbox {
    color: #7ab951;
    border: 1px solid #7ab951;
    background: #fff;
}
#share .be-addbox:hover {
    background: #7ab951 !important;
    color: #fff !important;
}
#share .be-qzone {
    color: #ff7400;
    border: 1px solid #ff7400;
    background: #fff;
}
#share .be-qzone:hover {
    background: #ff7400 !important;
    color: #fff !important;
}
#share .be-stsina {
    color: red;
    border: 1px solid red;
    background: #fff;
}
#share .be-stsina:hover {
    background: #ff0000 !important;
    color: #fff !important;
}
#share .be-tqq {
    color: #46c0e6;
    border: 1px solid #46c0e6;
    background: #fff;
}
#share .be-tqq:hover {
    background: #46c0e6 !important;
    color: #fff !important;
}
#share .be-renren {
    color: #3b68ac;
    border: 1px solid #3b68ac;
    background: #fff;
}
#share .be-renren:hover {
    background: #3b68ac !important;
    color: #fff !important;
}
#share .be-weixin {
    color: #006f1d;
    border: 1px solid #006f1d;
    background: #fff;
}
#share .be-weixin:hover {
    background: #006f1d !important;
    color: #fff !important;
}
.bd_weixin_popup {
    height: 250px !important;
}
.bd_weixin_popup_foot {
    display: none;
}

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

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

原代码:

.vcard .avatar {
    float: left;
    width: 64px;
    height: 64px;
    margin: 7px 10px 0 0;
    padding: 3px;
    border-radius: 5px;
    border: 1px solid #ddd;
    transition: all 0.8s ease 0s;
}

更改为:

.vcard .avatar {
    float: left;
    width: 64px;
    height: 64px;
    margin: 7px 10px 0 0;
    padding: 3px;
    border-radius: 34px;
    border: 1px solid #ddd;
    transition: all 0.8s ease 0s;
}

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

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

修改教程(点击进入)

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

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

将下面代码覆盖原有样式:

#respond #submit {
    background: #38a3fd;
    width: 15%;
    margin: 5px 0 15px 0;
    padding: 8px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 19px;
    -webkit-appearance: none;
    color: #fff;
    box-shadow: 0 6px 10px #38a3fd50;
}

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

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

修改教程(点击进入)

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

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

未完待续。。。

1. 本站付费资源来源于网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
去看你博客 » 去看你博客知更鸟主题美化记录文章

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
评论后隐藏内容依旧不可见怎么办?
首次在本站评论需要经过审核通过后才可显示,为了您的评论能尽快通过审核请勿恶意评论,评论通过后会在第一时间通过邮件的方式发送到您在本站的注册邮箱内!
下载后无法正常运行如何提供售后支持?
每一个程序都经过严格的测试后发布上线,99%的问题都是安装方法错误或环境缺少扩展导致。普通用户不提供技术售后(可进行留言,我们收到之后尽可能去解答,但不保证马上解决),会员用户可随时随地享受优质的售后技术支持与问题解答。更多说明请参考 VIP介绍。

4 评论

    1. 和你相比,还是差太多咯。

    1. 主要就是美化一下。

发表评论