为你的wordpress评论框添加个性背景图片

博客评论框如果能加上一些个性吸引人的背景图片,就能改变wordpress略显单调的情况。这里借用下小杜博客里的攻略,方便以后随时更改。方法很简单,就简单的几个步骤,认真看看肯定都会的,下面

是具体做法:

yue366-019

找到你所用风格的评论所在文件,yue366使用wordpress的iNove风格,评论文件就comment.php,打开此文件,发现评论框是用textarea代码来控制,并且textarea文本区域对应的CSS样式表ID为comment,这样我们就到主题样式表style.css里找到#comment代码,这个就是定义评论框的样式的,我们发现原来的代码为:

#comment {width:645px;}

这时,我们就可以通过改这个代码来实现给评论框添加上背景图片,添加后完整代码如下:

#comment {width:645px;background-image:url(img/comment-bg.gif);background-repeat:no-repeat;background-position:right bottom;}

下面对以上代码简单介绍:

width:是定义评论框的宽度;

background-image:url(图片地址),这里的图片可以绝对地址,也可以是相对地址,相对地址是相对style.css文件的,我就是用的相对地址。

background-repeat:no-repeat; 定义图片是不是重复;

background-position:right bottom; 定义图片对齐方式,这里是向右、底对齐。

之后你做个图片上传到你的空间,图片地址要和设置地址一致(代码中红色字体表示的),建议图片宽度不要大于文本区域宽度,高度在200以内。我做的图是590*100px的,不过你要根据自己的主题评论框大小制作图片。

做好自己喜欢的个性图片,上传到设定的位置。搞定。

About 民工

博士牌民工,以 民工 网名横行江湖。博士毕业于荷兰代尔夫特理工大学,现为武汉理工大学青年教师一枚。博士牌民工 博客,以分享我日常生活学习中的所见所闻所思所想。
This entry was posted in 杂谈 and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>