WordPress評論回復郵件通知勾選框美化

2018-4-27 15:56 來自本站原創 12,302 30 3
[摘要]

大多數WordPress博客都開啟了評論,增加了“評論回復郵件通知”的功能,但是默認勾選框不是太美觀,今天就對其進行美化。

互動交流對博客來說非常重要,絕大多數WordPress博客都開啟了評論,還有很多增加了“評論回復郵件通知”的功能,這樣能第一時間讓評論者收到回復通知。

WordPress評論回復郵件通知勾選框美化

雅兮網也是用了這個功能,但是否郵件通知的那個默認勾選框不是太美觀,今天就參考知更鳥大神的樣式進行美化

WordPress評論回復郵件通知勾選框美化

首先將郵件回復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>

然后在樣式表中添加如下樣式

/** 評論回復郵件通知 **/
 .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評論回復郵件通知勾選框美化

本文最后更新于2018年5月2日,已超過 1 年沒有更新,如果文章內容或圖片資源失效,請留言反饋,我們會及時處理,謝謝!

如果認為本文對您有所幫助請贊助本站

支付寶掃一掃贊助微信掃一掃贊助

  • 支付寶掃一掃贊助
  • 微信掃一掃贊助
  • 聲明:凡注明“本站原創”的所有文字圖片等資料,版權均屬 雅兮網 所有,歡迎轉載,但務請注明出處;
    目前評論:30   其中:訪客  17   博主  13
    加載中...
    1. 小白 1
      6個月前 (01-17) 17樓

      看不懂 , 還是有點深奧 是修改哪個文件?

    2. 1年前 (2018-06-30) 16樓

      有沒有 郵箱發送通知的模版,就是發件模版。不是站點評論

    3. 1年前 (2018-05-31) 15樓

      來這里多學習~!

    4. J2 1
      1年前 (2018-05-12) 14樓

      博主用的是什么代碼高亮啊?

    5. 1年前 (2018-05-01) 13樓

      五一快樂,好久沒逛了,混個臉熟

    6. 1年前 (2018-04-29) 12樓

      技術人就是好,什么都想得出

    7. 1年前 (2018-04-28) 11樓

      挺唯美的,頂一個,愛評論的少了,都是看臉時代,刷抖音美女

      • 飛鳥
        1年前 (2018-04-29)  地下1層

        @米粒博客: 現在的網友的只看不說,所以論壇才會沒落,所以博客的博主更要耐得住寂寞

    1 2
    發表評論

    疑問 調皮 難過 摳鼻 嚇 微笑 可愛 壞笑 驚訝 發呆 疑問 大兵 偷笑 咒罵 發怒 白眼 鼓掌 得意 擦汗 親親 大哭 呲牙 暈 強

    分享 30 3 12,302
    Top dhc篮彩双层皂盒