form_reply区域的改造
| |
Posted in 风格制作 on December 7, 2007 / 引用(0)
你是否对Bo-blog一成不变的评论区感到厌倦?在这篇日志里你将学到如何去改变它。
点击在新窗口中浏览此图片

本文的改造分为elements和css两部分,以下修改请使用Editplus等支持UTF-8的编辑器进行,保存时注意编码的选择。

elements.php部分
打开风格的elements.php,查找$elements['form_reply']以定位评论区位置。旧有风格使用table布局,缺乏灵活性,在这里我们使用以下代码替换,更改布局为div。保存,退出。
$elements['form_reply']=<<<eot
  <a name="reply"></a>
  <div id="commentForm">
    <form name="visitorinput" id="visitorinput" method="post" action="javascript: ajax_submit('{jobnow}');">
    <div class="formbox-comment">
      <div class="formbox-comment-title">{formtitle}</div>
      <div class="formbox-comment-content">
        <div class="formbox-comment-input">
          {if_neednopsw_begin}
          {$lnc[246]} <br/>
          <input name="v_replier" id="v_replier" type="text" size="42" class="text" value="{replier}" {disable_replier}/><br/>
          {$lnc[170]} <br/>
          <input name="v_repurl" id="v_repurl" type="text" size="42" class="text" value="{repurl}" /><br/>
          {$lnc[248]} <br/>
          <input name="v_repemail" id="v_repemail" type="text" size="42" class="text"  value="{repemail}" />
          <input name="v_password" id="v_password" type="hidden" size="12" class="text"  value="{password}" {disable_password}/>
          {if_neednopsw_end}
        </div>
        <div class="formbox-comment-tool">
          <input name="stat_html" id="stat_html" type="checkbox" value="1" {disable_html} /> {$lnc[242]}
          <input name="stat_ubb" id="stat_ubb" type="checkbox" value="0" onclick="showhidediv('ubbid')"/> {$lnc[243]}
          <input type="checkbox" value="0" onclick="showhidediv('emotid')" /> 表情
          <input name="stat_emot" id="stat_emot" type="checkbox" value="1" {disable_emot}/>{$lnc[244]}
          <input name="stat_property" id="stat_property" type="checkbox" value="1" onclick="promptreppsw();"/> {$lnc[245]}
          {if_neednopsw_begin}
          <input name="stat_rememberme" id="stat_rememberme" type="checkbox" value="1" {checked_rememberme} onclick="quickremember();"/>  {$lnc[284]} {if_neednopsw_rawend}{additional}
          </div>
        <div id="ubbid" class="formbox-comment-ubb" style="display: none;">{ubbcode}</div>
        <div id="emotid" class="panel-smilies" style="display: none;">
            <div class="panel-smilies-content">
            {emots}
            </div>
        </div>
        {if_securitycode_begin}<script type="text/javascript">securitycodejs="{$lnc[249]} <span id='securityimagearea'><img src='inc/securitycode.php?rand={rand}' alt='' title='{$lnc[250]}' style='cursor: pointer;' onclick=\"refreshsecuritycode('securityimagearea', 'v_security');\"/></span> <input name='v_security' id='v_security' type='text' size='4' maxlength='4' class='text' style='ime-mode: disabled' /> ";</script>  {if_securitycode_end}
        <textarea name="v_content" id="v_content" cols="64" rows="10" onkeydown="ctrlenterkey(event);" onfocus="if (securitycodejs!=null) {document.getElementById('showsecuritycode').innerHTML=securitycodejs; securitycodejs=null;}"></textarea> <br/>  <span id="showsecuritycode"></span>
        <div style="padding-top:10px">
        {hidden_areas}
        <input type="button" name="btnSubmit" id="btnSubmit" value="{$lnc[25]}" class="button" onclick="ajax_submit('{jobnow}'); return false;"/>&nbsp;
        <input name="reset" id="reset" type="reset" value="{$lnc[252]}" class="button" />
        </div>
      </div>
    </div>
    </form>
  </div>
eot;


styles.css部分
在完成了上一步改造后,需要在css文件中增添如下样式:
.formbox-comment-input{
}
.formbox-comment-tool{
}

下面附上gluedideas风格所使用的css样式,配合使用即可实现图中的效果。
.formbox{}
.formbox-comment{
  padding-top: 10px;
}
.formbox-comment-content{
}
.formbox-title,
.formbox-comment-title{
  color: #382E1F;
  font-weight: bold;
  background: #EEEEEE;
  padding: 5px;
}

.formbox-rowheader {
  padding: 5px;
  font-weight: bold;
}
.formbox-comment-input{
  margin: 10px 0;
}

.formbox-comment-tool{
  margin: 5px 0;
}
.formbox-content {
  padding: 5px;
}

/* smilies list */
.panel-smilies {
  text-align: center;
  position:relative;
  height:0px;
}
.panel-smilies-title {
  display:none;
  color: #382E1F;
  text-align: left;
  border-bottom: 1px solid #E6E6FA;
}
.panel-smilies-content {
  padding: 3px;
  line-height: 120%;
  position:absolute;
  border: 1px solid #A79D8F;
  background:#fff;
  left:180px;
  top:0px;
}



在草稿箱中躺了2个多月了,这篇日志估计都发霉了。人懒一直没动力把它完成,期间看到有些模板已经使用了上文所介绍的评论区样式,不知是否是参照gluedideas改的;如果是,麻烦再改一次。以前的模板有bug,会造成表情发送失败。
This entry comes from 本站原创 and has been read for 3194 times.It is tagged with , , .
7 Responses
lispm.cn Homepage says:
at December 22, 2007 10:51
源码不能复制了
1.请勿修改他人风格版权
2.请用标准浏览器
鬼火 回复于 December 22, 2007 12:14
Hui says:
at December 14, 2007 17:09
搞定~不过我那个好像有点太靠边了
KX says:
at December 12, 2007 22:58
啊,好久没去论坛……
那我尽快打个包放出来。
KX Homepage says:
at December 12, 2007 17:33
smile
费时改了,现在我的模板又有点用腻的感觉了,再过段时间放到论坛去弄个新的。
你的风格论坛有人要
鬼火 回复于 December 12, 2007 18:22
Jessie says:
at December 8, 2007 23:20
要是能把现在这个蓝色的评论框共享一下就好啦~~嘿嘿
模板结构类似,只是css不同罢了
鬼火 回复于 December 8, 2007 23:50
Homepage says:
at December 8, 2007 21:29
一直想要拥有这样的评论框,终于看到怎么做了,正好用在新模板上。学了表示下感谢~~~呵呵~~
期待你的作品哦^^
鬼火 回复于 December 8, 2007 22:01
yeyo Homepage says:
at December 7, 2007 22:21
[quote]以前的模板有bug,会造成表情发送失败。[/quote]
吐血中……
evil连字都打错了
鬼火 回复于 December 7, 2007 23:12
分页: 1/1 第一页 1 最后页
发表评论

昵称

网址

电邮

OpenID登入 高级选项 表情