Npcink Blog
切换菜单

B2 主题日志页底部“赞”美化 - WordPress 美化

日志页的底部右侧有两个很棒的喜欢和讨厌两个按钮，相当于一个投票，虽然很少有人会点，可能是不太引人注目，就将其美化了一下

最后更新于
本页目录4 节

B2 主题的日志页的底部右侧有两个很棒的喜欢和讨厌两个按钮，相当于一个投票，虽然很少有人会点，可能是不太引人注目，就将其美化了一下，

美化内容

  • 隐藏了踩按钮
  • 将赞按钮移动到了左边
  • 自定义美化了外观

效果

使用

获取本文的的 CSS 文件，将其中的代码添加至主题根目录下的 style.css 底部保存即可。

如果未能生效，请刷新下浏览器缓存或 CDN 缓存等各种缓存。

CSS 代码

/*赞样式自定义*/
.content-footer {
    display: block!important;
    overflow: hidden;
}


/*海报、收藏*/
.content-footer-poster {
    float: right;
}


/*赞、踩*/
.content-footer-zan-cai {
    float: left;
}
/*隐藏踩*/
.content-footer-zan-cai span:nth-of-type(2) {
    display: none;
}


/*赞样式*/
.content-footer-zan-cai span:first-child {
    padding: 0.92em 1.2em;
    font-size: 14px;
    border: 1px solid #ba392a;
    border-radius: 44px;
    background: #fff;
    letter-spacing: 6px;
    color: #ba392a;
}


/*添加赞文本*/
.content-footer-zan-cai span b:before {
    content: '赞';
}


/*添加hover动效*/
.content-footer-zan-cai span:hover {
    border-color: #dd8500;
    background-color: #dd8500;
    color: #fff;
}