继上次折腾《让 WordPress 友情链接分列显示》，今儿又对此主题SimpleG的评论输入框进行了美化，效果不错！

mhpl1.jpg mhpl2.jpg

改动了comments.php内部分代码，去掉了些不必要的代码，请童鞋对比着查看：

<div id="authormeta">
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="1"/>
<label class="small" for="author"><?php if ($req) _e(" "); ?></label>
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="2"/>
<label for="email"><?php if ($req) _e(" "); ?></label>
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="3" />
<label for="url"> </label>
</div>

改完comments.php，接下来进行实质工作——美化，添加以下代码至style.css:

/*留言信息的输入框(直接添加CSS中)*/
#authormeta input{background-repeat: no-repeat;margin:0 3px;}
#authormeta #author{background-image: url(images/author.png);width:100px;padding-left:56px;}
#authormeta #email{background-image: url(images/email.png);width:160px;padding-left:56px;}
#authormeta #url{background-image: url(images/uurl.png);width:160px;padding-left:56px;}
 
/*留言的输入框(替换原主题的定义代码)*/
#commentform textarea {background-image: url(images/pinglun.png);width:100%; height:100px; border:1px solid #D2D2D2;background-repeat: no-repeat;background-position: center center;}

原理呢，很简单：利用CSS添加了4个背景图片而已，4张小图片这里下载。放到哪？卧倒……主题的images文件夹内……

作了这样的一个小小美化也算是提高了访客的体验，说到访客推荐篇文章：《利用jQuery提高访客评论的用户体验》,文中说明的效果在各大博客已经很常见了，有兴趣的童鞋也可尝试下，很简单哦，推荐自己折腾折腾就懂了~

最后，小声问句：各位童鞋觉得林木木童鞋改得还不错吧？