[干货]魔改之给网站评论框增加动态图

  • 2017-08-18
  • 605
  • 7
  • 2

是否感觉自己的博客评论框单调缺少生气?

那么…为自己的评论框加一张动态图片吧…

本小白在此先感谢二次元大佬:月宅酱的网站素材~


小伟就写个简单教程,教教新手站长,我们必须先找css的代码

一、找到定义评论框css代码,这里小伟推荐用Chrome浏览器的“审查元素”功能,如下图(右键评论框里面):

 

二、在下面代码处找到定义评论框的css的id如下图,发现停留在蓝底部分,对应的#comment 就是我们要添加代码的位置了(也有可能直接是.开头的ID号,反正一个道理),代码行数显示style.css:1917,点击行数进入css文件预览。   (右键 新窗口查看放大的图片):

看到#comment上面的id:.comment-notes,记住它,等会我们去修改文件要用它搜索的!

 

三、进入后台 – 主题 – 编辑style.css文件,搜索你的评论框ID,如:”.comment-notes“,不要直接在ID下面添加,要在在#comment的最下面接着 加入下面的代码:

background:url(//你的网址/wp-content/themes/你的主题/plk.gif)right 50% no-repeat;;
background-repeat:no-repeat;
background-color:#F7F0ED;
background-position:center center;

 

免得大家再百度,我就解释一下代码意思:

background:url,这里填写的是背景图地址
 background-repeat,该属性表示是否重复,no-repeat为不重复,默认重复。
 background-position,该属性用来控制图片在评论框中的位置,前一个参数表示左右位,后一个参数表示上下位。
 background-color,该属性是评论框背景色

修改后保存,大功告成!以下成品截图:

最后记得把你的背景图片上传到主题目录下,这里WP巴士复制来的几张透明png背景图片,喜欢的朋友可以拿去用(右键直接保存即可)。

有问题的新手朋友,大胆的留下问题哦~

我也是小白,可能存在错误,欢迎指出疏漏的地方!

 


参考资料:

wordpress教程:给WordPress评论框加背景图片

本文所使用的个人网站:parkmimi

魔改素材出处:月宅酱

 

评论

  • 月宅回复
    QQbrowser 9 QQbrowser 9 Windows 7 Windows 7

    😮 怎么大家都要从我那边拿图…10几个人疯狂模仿我

    • Waylee回复
      MIUI Browser 9 MIUI Browser 9 Android 6.0.1 Android 6.0.1

      这图特好看[手动滑稽]不是吗
      配得上魔性的就是她了。

  • 月宅回复
    QQbrowser 9 QQbrowser 9 Windows 7 Windows 7

    emmm连名字都是我那个plk=评论框

    • Waylee回复
      MIUI Browser 9 MIUI Browser 9 Android 6.0.1 Android 6.0.1

      故意这个名字的 😎

  • 月宅回复
    QQbrowser 9 QQbrowser 9 Windows 7 Windows 7

    你打错字 😀 了吧? “这不是GIF”那这是啥 233333

    • Waylee回复
      Firefox 55 Firefox 55 Android 6.0.1 Android 6.0.1

      哈哈,一起传播正能量

发表评论