如何调整WordPress插件博客社交分享组件上下边距及去掉横线？

 懿古今   2022-10-27 09:31:00 发布  技术文档

前面跟大家分享了『WordPress博客主题JianYue完美契合博客社交分享组件』一文，这样一来使用JianYue主题建立的站点也有了打赏、点赞、微海报和分享功能。不过该插件默认的样式有点不太好，如上下边距太大还不一致，而且上面还有一条横线。具体如下图所示：

如何调整WordPress插件博客社交分享组件上下边距及去掉横线？ - 第1张 - 懿古今(www.yigujin.cn)

对于有点强迫症的站长来说，还是希望该组件上下文边距一样，上面的那条横线也希望去掉，那么应该怎么做呢？其实，我们只需要修改该插件的CSS代码即可。具体操作如下：

1、登录进入WordPress后台 - 插件 - 插件文件编辑器（Plugin File Editor）- 选择要编辑的插件中选择“博客社交分享组件”并点击【选择】按钮 - 点击assets/wbp_donate.css文件。

如何调整WordPress插件博客社交分享组件上下边距及去掉横线？ - 第2张 - 懿古今(www.yigujin.cn)

2、在assets/wbp_donate.css文件中找到以下代码：

.wbp-cbm {
margin-top: 50px;
padding-top: 50px;
padding-bottom: 30px;
border-top: 1px solid var(--baseBgColor,#ebebeb);
text-align: center;
font-size: 0;
clear: both;
}

修改为：

.wbp-cbm {
padding-top: 10px;
padding-bottom: 20px;
text-align: center;
font-size: 0;
clear: both;
}

即可。修改之后的具体效果如下图所示：

如何调整WordPress插件博客社交分享组件上下边距及去掉横线？ - 第3张 - 懿古今(www.yigujin.cn)

修改后的效果是不是比原来的效果要好一些相对紧凑一些？当然，这只是一种修改的思路，大家也可以根据自己站点的实际情况来进行调整。

本文地址：https://www.yigujin.cn/5274.html

你可能感兴趣的文章

文章标签：
版权声明：本文为原创文章，版权归 懿古今 所有，欢迎分享本文，转载请保留出处！发布此文是出于传递更多信息之目的，若有来源标注错误或侵犯了您的合法权益，请发邮件至[email protected]，确认后马上更正、删除，谢谢！
淘宝和京东热销产品和VIP会员的优惠券推荐

发表评论

  1. 飞牛
    飞牛 @回复
    发表于2022-10-31 12:11  沙发

    font size 这个貌似不需要？

    • 懿古今
      懿古今2022-10-31 12:24  回复

      @飞牛这个是原来就是的，我就没有看是否有用，觉得没用直接去掉即可。

  2. 一隅博客
    一隅博客 @回复
    发表于2022-10-31 15:45  板凳

    漂亮

    • 懿古今
      懿古今2022-10-31 15:56  回复

      @一隅博客这个插件确实很不错，不过总感觉没什么用，本站建站这么久还没遇到过有打赏的，分享的除了自己估计就没人了，所以就懒得添加这些功能了。