WordPress评价回应电子邮件通告启用框清理

2021-04-07 07:32

[引言]

大多数数WordPressblog都打开了评价,提升了“评价回应电子邮件通告”的作用,可是默认设置启用框并不是太美观大方,今日就对其开展清理。


互动交流沟通交流对blog来讲十分关键,绝大部分WordPressblog都打开了评价,也有许多提升了“评价回应电子邮件通告”的作用,那样能第一時间让评价者接到回应通告。

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

雅兮网也是用了这一作用,可是否电子邮件通告的哪个默认设置启用框并不是太美观大方,今日就参照知更鸟高手的款式开展清理

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

最先将电子邮件回应html一部分开展构造调节至以下方式,关键便是表层小盒子再加mail-notify类,而input标识再加“notify”类。

 span 
 input type="checkbox" name="comment_mail_notify" id="comment_mail_notify" value="comment_mail_notify" checked="checked" / 
 label for="comment_mail_notify" span 有些人回应时电子邮件通告我 /span /label 
 /span 

随后在款式表格中加上以下款式

/** 评价回应电子邮件通告 **/
 .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;
 }

有编码基本的时尚博主还可以依据自身的主题风格对所述款式开展色调、规格上的调节以做到最好实际效果。

以后更新网页页面,启用框早已清理结束!

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


高新科技迷、外设控、WordPress喜好者,高新科技更改日常生活,用力中的键鼠将IT的快乐共享给大量的人!


扫描二维码分享到微信

在线咨询
联系电话

020-66889888