复制本文网址 | 上一篇 | 下一篇 | 返回日志列表

美化zblog评论输入框

zblog的皮肤,一般都不会去修改日志评论输入框,原来怎样,现在就怎样。或许,这也是一种特色,用的什么blog程序总能从输入框、页码显示效果等找出一点倪端。不过,我想,完美的皮肤应该还是会在意这一块的美化,否则白色的背景和输入框又怎么和那么多色彩均配合得能完美逼近无暇呢?

zblog的评论输入框位置修改自然在模板里,是b_article_commentpost.html,而验证码是b_article_commentpost-verify.html。默认的验证码被拉伸了,其高度宽度可以在这里修改width和heigth值,默认的是50和11;边框颜色也在这里,img的style里的border;缩小后的验证码会往上走,我顺道加了个padding-top:2px;以使其看起来上下居中。

在b_article_commentpost.html里,有个<#template:article_commentpost-verify#>是验证码的标签。我把姓名和验证码调为一行,代码为:

<p><label for="inpName"><#ZC_MSG001#>:</label><input type="text" name="inpName" id="inpName" class="text" value="" size="28" tabindex="1" /><label for="inpName">(必填)</label><#template:article_commentpost-verify#></p>

至于下面什么网站、邮箱的自己琢磨了。<#ZC_MSG055#>这类标签是文字标签,对应的是LANGUAGE/SimpChinese.asp。不过不用查,根据位置就应该能猜到大概地方。

其实最关键一点是CSS,如果用过浏览器CSS查看工具的会很容易知道输入框的CSS大部分没写。

/*名字输入框*/
#inpName{width:150px;border:1px solid #9455c6;background:none;height:11px;}
/*验证码输入框*/
#inpVerify{width:50px;border:1px solid #9455c6;background:none;height:11px;}
/*邮箱输入框*/
#inpEmail{width:300px;border:1px solid #9455c6;background:none;height:11px;}
/*网站地址输入框*/
#inpHomePage{width:300px;border:1px solid #9455c6;background:none;height:11px;}
/*正文输入框*/
#txaArticle{border:1px solid #9455c6;background:none;}

以上输入框都可以分别定位width、height、border(边框)、background(背景),当然,也可以放入背景图。根据皮肤适当修饰即可。

  • 2007-11-14 12:5:27  Z-Blog CSS   
评论列表
共5篇评论
  • 1楼   玉面小白虎  http://myclassic.cn/log/   14/11/2007 21:31:35 (距发表9小时后)   
  • 能把提交评论时,出现的渐变效果讲下么
  • 2楼   aas    15/11/2007 10:01:37 (距发表22小时后)   
  • 把自己的博客做好看点再教人美化吧.
  • 3楼   不是俺  http://www.butwho.net   15/11/2007 23:29:28 (距发表35小时后)   
  • 这个,如果您的验证码这样显示,就比较容易被破解。ocr太简单了。

    俺还是喜欢wordpress的那个号称是图灵测试的“1+5=?”这样的验证方式。
  • 4楼   花果山寨  http://www.wodidai.com   29/04/2008 13:27:46 (距发表4009小时后)   
  • 那评论框的宽度应该如何修改呢?
    星铃丹 于 2008-4-29 14:05:10 回复
    评论框的宽度一般是修改CSS里的textarea.text里的width值。
  • 5楼   无名指  http://www.wmzblog.cn   29/08/2008 13:08:24 (距发表6937小时后)   
  • 那些CSS要自己加上去么?我怎么在我的CSS文件里面没找到那些项?

发表评论

☆温馨提示:为防spam,评论禁止了网址相关内容,如想发自己的网站,请往网址专用输入框里放 ^_^

Powered By Z-Blog | YYNote Design By 星铃丹 | 摇曳铃丹 版权所有 YYLD.net