-
相信很多玩博客的朋友都知道卢松松的松松主题(原低调与华丽主题),在松松主题的评论框是一一个背景图片的,之前陈德馨也用过卢松松的主题,现在转战到WordPress之后就想着也在评论框增加一个背景图片,于是就折腾了一下,总算实现了。
下面陈德馨将根据实际操作经验,说说给WordPress评论框加上背景图片的方法。
一、用图片设计软件自行设计背景图片,并将其透明度调到50%(看个人喜好),上传到服务器。
例如你设计的图片命名为comment.png,并上传到“/wp-content/themes/你的当前主题/images/”目录下,那么你的图片绝对路径就是“http://你的域名/wp-content/themes/你的当前主题/images/comment.png”。
二、打开你博客有评论框的任何一个页面,查看页面的源代码或者直接查看主题目录下的Comment.Php文件
评论框有类似的代码:
<label for=’comment’ class=’textarea ’>Your Comment</label> <textarea name=’comment’ id=’comment’ cols=’60′ rows=’10′ tabindex=’4′ class=’textarea’></textarea>
可以发现评论框是用textarea代码来控制的,并且textarea文本区域对应的CSS样式表ID为comment,因此可以直接到主题样式style.css里找到#comment代码,其作用就是定义评论框的样式。
三、打开“/wp-content/themes/你的当前主题/”目录下的style.css文件,查找#commentform textarea,你会发现如下代码:
font: 110% Arial, Helvetica, sans-serif; height: 140px; border: solid 1px #999999; padding: 5px 3px 3px 7px; margin-top: -1px; width: 90%; max-width: 90%; }
说明:每一个主题的CSS代码可能不同,根据实际情况查找。
添加如下代码:
background-image:url(图片的地址); background-repeat:no-repeat; background-position:right bottom; font: 110% Arial, Helvetica, sans-serif; height: 140px; border: solid 1px #999999; padding: 5px 3px 3px 7px; margin-top: -1px; width: 90%; max-width: 90%; }
说明:
background-repeat:no-repeat;是指拉大评论框图片不重复出现;
background-position:right bottom;是指图片与评论框的右、底对齐
四、保存文件,覆盖上传之后,刷新下就可以看到效果了。
WordPress评论框加上背景图片的方法
2167人参与 |分类: 站长百科|时间: 2016年04月24日
相关文章
- 2020-05-09WordPress使用timthumb.php截取文章缩略图
- 2018-11-09一键安装KMS服务脚本 搭建自己的KMS激活服务器教程
- 2018-10-30Windows 10系统的3D Objects(3D对象)文件夹如何删除
- 2018-03-16WINGHO..文件夹删除方法
- 2017-12-23WordPress博客什么时候才需要使用缓存插件?
- 2017-12-05WordPress站点SEO优化中需要避开6个常见错误
- 2017-11-11升级WordPress时提示’另一更新正在进行’的解决方法
- 2017-11-02WordPress上传文件自动重命名
- 2017-10-28WordPress前台显示用户的注册时间
- 2017-08-15WordPress发布/更新文章、提交/审核评论自动清理阿里云CDN缓存
评论专区德信商城