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

投稿   雅兮网  2018-04-29 07:39:13  238 人阅读  25 条评论

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

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

1、将邮件回复 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>

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

  1. /** 评论回复邮件通知 **/
  2. .mail-notify {
  3. padding-left: 10px;
  4. font-size: 14px;
  5. vertical-align: middle;
  6. }
  7. .mail-notify span {
  8. position: absolute;
  9. top: -6px;
  10. left: 0;
  11. width: 230px;
  12. color: #999;
  13. padding-left: 38px;
  14. padding-left: 5px\9;
  15. }
  16. .notify {
  17. display: none;
  18. display: inline\9;
  19. }
  20. .notify + label {
  21. position: relative;
  22. background: #a5a5a5;
  23. width: 30px;
  24. width: 0\9;
  25. height: 15px;
  26. cursor: pointer;
  27. display: inline-block;
  28. border-radius: 15px;
  29. }
  30. .notify + label:before {
  31. content: '';
  32. position: absolute;
  33. background: #fff;
  34. top: 0;
  35. left: -1px;
  36. width: 15px;
  37. width: 0\9;
  38. height: 15px;
  39. z-index: 99999;
  40. border: 1px solid #ddd;
  41. border-radius: 15px;
  42. border: none\9;
  43. }
  44. .notify + label:after {
  45. content: '';
  46. position: absolute;
  47. top: 0;
  48. left: 0;
  49. color: #fff;
  50. font-size: 9px;
  51. font-size: 0.9rem;
  52. }
  53. .notify:checked + label {
  54. background: #32a5e7;
  55. border-radius: 15px;
  56. }
  57. .notify:checked + label:after {
  58. content: '';
  59. left: 6px;
  60. }
  61. .notify:checked + label:before {
  62. content: '';
  63. position: absolute;
  64. z-index: 99999;
  65. left: 15px;
  66. border-radius: 15px;
  67. }
  68. .notify + label:after {
  69. left: 15px;
  70. line-height: 21px;
  71. }
  72. .notify + label:after, .notify + label:before {
  73. -webkit-transition: all 0.1s ease-in;
  74. transition: all 0.1s ease-in;
  75. }
有代码基础的博主也可以根据自己的主题对上述样式进行颜色、尺寸上的调整以达到最佳效果。

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

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

历史上的今天:

如果文章对你有帮助,请赞赏支持作者继续创作!

文章标签: ,   ,  
原文地址:https://www.yaxi.net/2018-04-27/1777.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 雅兮网 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
雅兮网

相关文章 分类热门分类热评最新问答

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. Monicfenga
    Monicfenga @回复

    哇哦!这个改一改应该也能用在网站上的其他元素。

  2. 讯沃电商blog
    讯沃电商blog @回复

    很不错,谢谢分享~~

  3. 跨境电商教程
    跨境电商教程 @回复

    新手~学习起来~~~~~

  4. 优站云资源
    优站云资源 @回复

    大神就是厉害 [给力]

  5. 西枫里博客
    西枫里博客 @回复

    支持雅兮大神~ [给力]

  6. 云顶天的世界
    云顶天的世界 @回复

    符合现在的审美~

  7. 学习笔记Blog
    学习笔记Blog @回复

    不错,厉害呀!懂CSS真好!羡慕呀! [可怜] [哈哈] [嘻嘻]

  8. 好会吃美食博客
    好会吃美食博客 @回复

    立马高大上了 [偷笑]

  9. 陈鑫威博客
    陈鑫威博客 @回复

    头像不错。 [嘻嘻]

  10. 明月清风
    明月清风 @回复

    那个头像错啊!

  11. 城南博客
    城南博客 @回复

    来学习了

  12. 雷奥技术网
    雷奥技术网 @回复

    还是畅言给力一点,毕竟防广告做的不错

  13. Ournice Blog
    Ournice Blog @回复

    其实个人觉得搜狐畅言那款看起来还不错;另外昨儿看到有个韩国的来必力,看起来比搜狐畅言要差多了

  14. ZAERA
    ZAERA @回复

    这个要支持顶一下

  15. devoted
    devoted @回复

    哎,又是瞎折腾。

  16. 80后记忆
    80后记忆 @回复

    nana主题这个勾选框和主题很相衬,不用折腾了!

  17. 99八十一
    99八十一 @回复

    有时候是得美化下,内容重要,面子也重要 [嘻嘻]

  18. 狂放
    狂放 @回复

    早扒过了哈哈哈

  19. 银色月航
    银色月航 @回复

    邮件回复一直没搞定。。。

  20. 闲鱼
    闲鱼 @回复

    雅兮老司机的教程必须顶

  21. 手机赚钱
    手机赚钱 @回复

    说好的段子呢

  22. 钟水洲
    钟水洲 @回复

    我觉得简约不简单的感觉才好

  23. 沈唁志
    沈唁志 @回复

    我评论的默认的感觉还凑合 [哈哈]

  24. 呆毛网
    呆毛网 @回复

    [可怜] 挺好看的。

  25. 梁兴健
    梁兴健 @回复

    美化后看起来舒服多了