WordPress评论回复邮件通知勾选框美化教程

  • A+
所属分类:网站优化

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

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

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

<span class="mail-notify">
<input type="checkbox" name="comment_mail_notify" id="comment_mail_notify" value="comment_mail_notify" checked="checked" class="notify" />
<label for="comment_mail_notify"><span>有人回复时邮件通知我</span></label>
</span>

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、添加完相应代码刷新相关缓存后刷新页面,“有人回复时邮件通知我”的勾选框已经美化完毕,具体效果见下图:
WordPress评论回复邮件通知勾选框美化教程

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

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
小K

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: