最新公告
  • 欢迎您光临DT模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • WordPress评论回复邮件通知勾选框美化教程


    互动交流对博客来说非常重要,绝大多数 WordPress 博客都开启了评论,还有很多增加了“评论回复邮件通知”的功能,这样能第一时间让评论者收到回复通知,但是那个“有人回复时邮件通知我”的默认勾选框不是太美观(具体见下图),所以今天就参考知更鸟大神的样式对其进行美化。

    WordPress 评论回复邮件通知勾选框美化步骤

    1、将邮件回复 html 部分进行结构调整至如下形式,主要就是外层盒子加上 mail-notify 类,而 input 标签加上“notify”类。

    
    
    
    
    

    2、在样式表中添加如下样式:

     

    
    /** 评论回复邮件通知 **/
    .mail-notify {
    padding-left: 10px;
    font-size: 14px;
    vertical-align: middle;
    }
    .mail-notify span {
    position: absolute;
    top: -6px;
    left: 0;
    width: 230px;
    color: #999;
    padding-left: 38px;
    padding-left: 5px\9;
    }
    .notify {
    display: none;
    display: inline\9;
    }
    .notify + label {
    position: relative;
    background: #a5a5a5;
    width: 30px;
    width: 0\9;
    height: 15px;
    cursor: pointer;
    display: inline-block;
    border-radius: 15px;
    }
    .notify + label:before {
    content: '';
    position: absolute;
    background: #fff;
    top: 0;
    left: -1px;
    width: 15px;
    width: 0\9;
    height: 15px;
    z-index: 99999;
    border: 1px solid #ddd;
    border-radius: 15px;
    border: none\9;
    }
    .notify + label:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-size: 9px;
    font-size: 0.9rem;
    }
    .notify:checked + label {
    background: #32a5e7;
    border-radius: 15px;
    }
    .notify:checked + label:after {
    content: '';
    left: 6px;
    }
    .notify:checked + label:before {
    content: '';
    position: absolute;
    z-index: 99999;
    left: 15px;
    border-radius: 15px;
    }
    .notify + label:after {
    left: 15px;
    line-height: 21px;
    }
    .notify + label:after, .notify + label:before {
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    }
    

    代码基础的博主也可以根据自己的主题对上述样式进行颜色、尺寸上的调整以达到最佳效果。

    3、添加完相应代码刷新相关缓存后刷新页面,“有人回复时邮件通知我”的勾选框已经美化完毕,具体效果见下图:

    添加好后效果还是蛮不错的,喜欢的朋友可以改下!

    DT模板网上源码供源码爱好者(站长)学习研究使用。借鉴职业开发人员的代码写法,快速提升自己。部分源码需以前VIP用户分享,VIP费用供我们用来买源码,服务器开支。源码具有可复制性,部分源码被不断分享出去,但源码本身的性质不变,仅供本地环境下学习研究使用,如果你直接拿来做站,又做了违法违规的网站,请自行承担一切法律后果。
    DT模板网 » WordPress评论回复邮件通知勾选框美化教程

    发表评论

    • 3563会员总数(位)
    • 744资源总数(个)
    • 2本周发布(个)
    • 0 今日发布(个)
    • 591稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情