我想大多数用Wordpress的站长都用别人设计好的通用主题模板,很少一部分既有才又有空的牛人才会定制属于自己的个性化主题。通用主题最大的优势当然就是通用啦,谁套用都行,这也就是通用主题的最大缺点,没有个性化。我现在用的是zEUS设计的主题,很漂亮,但是物以稀为贵嘛,用的人多了就没意思。我虽没才,但很有空,所以在保留原主题版权的前提下我对该主题小小的DIY了一下。
本篇简单介绍下对评论框的DIY。你是否已经看厌倦了光秃秃白板一块的留言评论框呢?可以说这是通用模板的通病,所以我给评论框加了一个Logo的背景,效果可以看我的留言框。方法很简单,只要给评论框的CSS加个background属性就行了,效果却很明显。
例如,我的评论框CSS:
#commentform textarea {
font:120% Arial, Helvetica, sans-serif;
width:97%;
height:140px;
border:solid 1px #ccc;
background:#F6F6F6 url(/images/comment-bg.gif) no-repeat scroll center center;
overflow:hidden;
padding:2px 5px;
}
font:120% Arial, Helvetica, sans-serif;
width:97%;
height:140px;
border:solid 1px #ccc;
background:#F6F6F6 url(/images/comment-bg.gif) no-repeat scroll center center;
overflow:hidden;
padding:2px 5px;
}
其中,以下一行代码就是评论框背景的关键所在:
background:#F6F6F6 url(/images/comment-bg.gif) no-repeat scroll center center;
每个模板的评论框的选择器可能都不相同,但是原理都是一样的,这个可以通过Firebug查出,最后,have fun!
-
Wordpress 访客信息输入框美化2009年07月7日 -
Wordpress 自定义顶部图像2011年01月29日 -
正式向 DIV+CSS 进军2010年01月27日 -
回调函数个性化 Wordpress 评论样式2010年01月16日
博主厉害。。
请问输入时候让背景图消失的:active 放在哪个位置? 我是新手,谢谢了
你说的应该是 :focus,不是 :active
可能我看错了吧, 那么这个:focus放在哪个位置呢, 求教
学习了
你好!你的内容我先收藏了备用。
我刚开始使用wordpress,请问一下,有评论对话框这种插件的么?我原先安装的模板只有一个对话框,没有输入名称、邮箱、网址什么的……
这个不需要插件的,主题应该都有,如果你原先插件模板没有的话,那就说明你的这个主题是不规范的
en~明白了~ 谢谢博主~
很好 谢谢
不会用
没成功!找不到评论框的选择器
我是个新手,不知道楼主能不能帮一下
看到你的网站已经用上了嘛
overflow:hidden;这个属性不加是最好的吧,如果加上了,那么假设在文字输入的太多的时候,超过了这个文本输入框,那么就不会有右侧边栏的下拉条出现了,这样似乎没办法让用户留言了吧?不知道我这样说是否正确?
不过我在个人博客上是实践成功了。我的博客按照你的这个CSS写法,结果在文字输入过多的时候,侧边栏就没有下拉跳,后来我查到是overflow:hidden;这个属性的原因,去掉了就好了。不知是否是我博客自身的问题。呵呵呵……
是的,这里应该改成overflow:auto;才对,谢谢指正
怎么实现点击图片,这个评论框背景消失呢?
:active可以实现,但是在IE6下无效
我也想添加图片,可是不会,能帮帮我吗?
这是我的评论段css:
#commentform label { display: block; height: 25px; font-family: Georgia, serif; font-size: 11px; font-style: italic; }
#commentform input.txt, #commentform textarea { width: 93%; margin: 0 0 3px 0; padding: 8px 7px 6px 5px; font-size: 13px; font-weight: bold; border: none; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
#commentform .url input, #commentform textarea { width: 97%; }
#commentform #submit { margin: 20px 0 0 0; padding: 7px 15px 5px 15px; font-family: Helvetica, Arial, Sans-serif; font-size: 12px; text-transform: uppercase; font-weight: bold; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
在你的#commentform textarea中加个background
上面有2个#commentform textarea
请问加在哪个里面?
谢谢~
单独另写一个,不能和其他类共用
嗯。我来试试看。不行的话再来请教博主。
站在楼顶上凉快。
目前还没加这个的打算
/images/comment-bg.gif 之前的/是否应该去掉?
这个就看你的图片放在什么位置了,有/是绝对路径,没有/就是相对路径
还得麻烦你 为什么在回复别人留言时 我评论右侧的广告没有跟着走 有错位
或者怎样实现不跟着走
学习了,这个我可以动手操作
改好了 哈哈效果不错!!!~
受用…回去就弄上…哈哈…又来剽窃了!
Pingback: 我要去淘淘 » 打造自己的个性化 Wordpress 评论框
测试成功 谢谢···
Pingback: 求索阁 » Blog Archive » 个性化 Wordpress 评论框
原来这个背景是这样做出来的呀。
有空找张图试试
哈哈,评一把
请问博主的这个评论插件叫什么名字?
我的围脖也想拥有这样一个可以盖楼,又可以显示图片,又可以在帖内恢复,而不用直接跳到页面最低下回复帖内的信息的插件。
请告知,谢谢:)
呃,可是我没有用插件啊,纯代码
我想弄个回复嵌套的,就像你这样的。
要么是 不是嵌套,回复缩进的。
我的网站评论模式是直排,哎呀,说不来,你可以去看下。
如果你的主题支持2.7+的函数,那就在后台开启嵌套评论就可以啦
貌似不支持的。。还有什么办法吗?
那可以使用 wp thread comments 插件
在党的正确领导下,终于在评论框加入图片背景了,支持..
哈,我去观摩一下
发现万戈回复我评论有邮件,也马上给自己博客折腾了一个,这里的留言框很特别,回头自己也折腾一个,不过,如果不通过插件,怎样能调用这些表情呢?万戈
非插件调用表情符:
http://wange.im/expression-without-plugins-in-wordpress.html
我一直想在邮件里也能调用到这些表情,但是至今未果
我知道mail to commenter插件可以做到,还在研究中~
"You cannot escape the responsibility of tomorrow by evading it today." - Abraham Lincoln
Demi Moore
不知道深色的背景行不行?
没问题的,要啥背景图都可以
http://immmmm.com/message-input-box-landscaping-css.html
加上我这篇~嘻嘻
恩,不错不错,下午我就试试,成功的话就要大力宣传该方法
嘿嘿,我之前就用上了。
我就是一直搞不明白为什么我的评论框每次回复都要重新输入用户名电邮和网址这些信息。。。累死了。。。
你可以用FF的easyComment插件,那就不需要重新输入啦
博主做出来的效果很不错
用上了,谢谢万戈兄的分享!
不用客气,有人喜欢,那写出来就值了
完全按照老大的方法做了,但是没有任何效果。为何?
老大帮忙分析一下。谢谢啦!
谢谢你的支持,我已经将贵站所需修改的CSS代码发送至你的邮箱,请注意查收
原来是放错位置了。效果已经出现啦!
你的文章大多关于技术类,非常之好,值得学习研究。
非常感谢老大的技术帮助!
不用客气,欢迎常来坐客,我会好生招待的,嘿嘿~
是的。非常高兴,又认识了一位热心的朋友。
好吃好喝,为啥不常登门拜访呢?呵呵。。。
偶的改起来有点怪怪的!
哪里怪呀?说来听听
我看了一下,你的评论框本来就有background属性,只要加个url图片地址就可以咯
偶对编程一片茫然!哎!
已经把具体操作方法通过邮件发给你了
偶已经测试完成!但遗憾的没没出现效果!请查看邮件!截图回复!
搞定搞定!谢谢万恶的万戈哈哈!
啊哈 抢沙发成功 这个效果我滴喜欢 就等着你放出来呢
哈哈,谢谢支持,汉兄喜欢的话早说呢,我秘传给你
回头再秘传一次 哈 以示神奇
行啊,你稍等,我直接把代码发到你邮箱去
大热天的 抓紧抢沙发坐
给你一把风扇