你是否对Bo-blog一成不变的评论区感到厌倦?在这篇日志里你将学到如何去改变它。

本文的改造分为elements和css两部分,以下修改请使用Editplus等支持UTF-8的编辑器进行,保存时注意编码的选择。
elements.php部分
打开风格的elements.php,查找$elements['form_reply']以定位评论区位置。旧有风格使用table布局,缺乏灵活性,在这里我们使用以下代码替换,更改布局为div。保存,退出。
styles.css部分
在完成了上一步改造后,需要在css文件中增添如下样式:
下面附上gluedideas风格所使用的css样式,配合使用即可实现图中的效果。
后
在草稿箱中躺了2个多月了,这篇日志估计都发霉了。人懒一直没动力把它完成,期间看到有些模板已经使用了上文所介绍的评论区样式,不知是否是参照gluedideas改的;如果是,麻烦再改一次。以前的模板有bug,会造成表情发送失败。
本文的改造分为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;"/>
<input name="reset" id="reset" type="reset" value="{$lnc[252]}" class="button" />
</div>
</div>
</div>
</form>
</div>
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;"/>
<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{
}
}
.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;
}
.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,会造成表情发送失败。



7 Responses
2.请用标准浏览器
那我尽快打个包放出来。
费时改了,现在我的模板又有点用腻的感觉了,再过段时间放到论坛去弄个新的。
吐血中……