当前位置:
首页 > 网站建设 > 维护优化 > WordPress评论回复邮件通知勾选框美化

时时彩开奖记录:WordPress评论回复邮件通知勾选框美化

互动交流对博客来说非常重要,绝大多数WordPress博客都开启了评论,还有很多增加了“评论回复邮件通知”的功能,这样能第一时间让评论者收到回复通知。

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

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

  1. <span?class="mail-notify">
  2. <input?type="checkbox"?name="comment_mail_notify"?id="comment_mail_notify"value="comment_mail_notify"?checked="checked"?class="notify"?/>
  3. <label?for="comment_mail_notify"><span>有人回复时邮件通知我</span></label>
  4. </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评论回复邮件通知勾选框美化

本文转载自雅兮网:https://www.yaxi.net/2018-04-27/1777.html

WordPress评论回复邮件通知勾选框美化:等您坐沙发呢!

发表评论

表情
还能输入210个字
山东时时彩交流群
  • 国宝级黄腹角雉住进三清山 2019-02-15
  • 图解:习近平主席这12个金句振奋人心! 2019-02-15
  • 以朝鲜民主主义人民共和国为例,难道特金会是由朝鲜工人、农民主导的?[哈哈] 2019-02-14
  • 公众论坛官方网站首页·南方都市报·南方报业传媒集团 2019-02-14
  • 云南玉溪纪检监察机关认真开展端午节纪律作风检查 2019-02-13
  • 计划经济是根据政府计划调节经济活动的经济运行体制。又称为指令型经济。小萌以为是各经济组织把自己制订的计划上报一下就叫计划经济? 2019-02-13
  • 罗亦农:“残躯何足惜,大敌正当前” 2019-02-12
  • 钦州市开展扶贫领域监督执纪问责宣传活动 2019-02-12
  • 西安市出台《意见》助推网络市场经济发展 2019-02-12
  • 中国雷达4.0时代相关新闻 2019-02-11
  • 生活垃圾分类到底卡在哪?居民分类意识仍然偏低 2019-02-11
  • 沿汾河 一览众桥雄姿 2019-02-11
  • 《国家社会科学基金年度报告(2013)》出版发行 2019-02-10
  • 微视澳洲(三):海豚岛之沙滩探险 2019-02-10
  • 上海市举行初心使命大家谈活动交流体会感悟 2019-02-10
  • 835| 349| 894| 474| 262| 152| 457| 733| 130| 763|