眼镜蛇 发表于 2012-12-20 09:31:00

Discuz!X帖子内容页样式美化修改方法 - 标题栏(仿19lou)

1.帖子标题栏样式修改方法:

(1)在./template/default/forum/目录下复制”viewthread.htm“文件到当前使用的风格对应目录,如复制

到./template/yourtemplate/forum/下;
(2)文本方式打开当前风格目录下”viewthread.htm“文件;
(3)查找如下代码:
<div id="postlist" class="pl bm">

(4)在查找的位置前面增加如下代码:
<div class="bm_h kmtx kmr0 kmn19vbt">
<span class="z"></span>
<h2 class="z">
                                                                                             <!--{if $_G['forum_thread']['typeid'] && $_G['forum']['threadtypes']['types']

[$_G['forum_thread']['typeid']]}-->
                                                <!--{if !IS_ROBOT && ($_G['forum']['threadtypes']['listable'] ||

$_G['forum']['status'] == 3)}-->
                                                      <a href="forum.php?mod=forumdisplay&fid=$_G

&filter=typeid&typeid=$_G">[{$_G['forum']['threadtypes']['types'][$_G['forum_thread']['typeid']]}]</a>
                                                <!--{else}-->
                                                      [{$_G['forum']['threadtypes']['types'][$_G

['forum_thread']['typeid']]}]
                                                <!--{/if}-->
                                        <!--{/if}-->
                                        <!--{if $threadsorts && $_G['forum_thread']['sortid']}-->
                                                <a href="forum.php?mod=forumdisplay&fid=$_G

&filter=sortid&sortid=$_G">[{$_G['forum']['threadsorts']['types'][$_G['forum_thread']['sortid']]}]</a>
                                        <!--{/if}-->
<a href="forum.php?mod=viewthread&tid=$_G" id="thread_subject">$_G</a>
</h2>      
<span class="z kmfz">
                                                                                              <!--{if $_G['forum_thread'] == -2}-->({lang moderating})
                                        <!--{elseif $_G['forum_thread'] == -3}-->({lang have_ignored})
                                        <!--{elseif $_G['forum_thread'] == -4}-->({lang draft})
                                        <!--{/if}-->
                                        <!--{if $_G['forum_thread']['recommendlevel']}-->
                                                 <img src="{IMGDIR}/recommend_$_G['forum_thread']

['recommendlevel'].gif" alt="" title="{lang thread_recommend} $_G['forum_thread']" />
                                        <!--{/if}-->
                                        <!--{if $_G['forum_thread']}-->
                                                 <img src="{IMGDIR}/hot_$_G['forum_thread']

.gif" alt="" title="$_G['forum_thread'] {lang heats}" />
                                        <!--{/if}-->
                                        <!--{if $_G['forum_thread']['closed'] == 1}-->
                                                 <img src="{IMGDIR}/locked.gif" alt="{lang close}"

title="{lang close}" class="vm" />
                                        <!--{/if}-->
<a href="forum.php?mod=viewthread&tid=$_G$fromuid" onclick="return copyThreadUrl(this)" title="{lang

share_url_copy_comment}">[{lang share_url_copy}]</a>
</span>                        
<span class="y comiis_hfs"><a>$_G</a><br>{lang reply}</span>
<span class="y comiis_cks"><a>$_G</a><br>{lang show}</span>
<!--{if !IS_ROBOT}-->
<span class="y comiis_sxy">
<!--{if $post['invisible'] == 0}-->
<a href="forum.php?mod=viewthread&action=printable&tid=$_G" title="{lang thread_printable}" target="_blank"><img

src="{IMGDIR}/print.png" alt="{lang thread_printable}" class="vm" /></a>
<!--{/if}-->
<a href="forum.php?mod=redirect&goto=nextoldset&tid=$_G" title="{lang last_thread}"><img src="{IMGDIR}/thread-

prev.png" alt="{lang last_thread}" class="vm" /></a>
<a href="forum.php?mod=redirect&goto=nextnewset&tid=$_G" title="{lang next_thread}"><img src="{IMGDIR}/thread-

next.png" alt="{lang next_thread}" class="vm" /></a>
</span>
<!--{/if}-->
</div>

(5)在步骤3查找的代码位置下查找如下代码,并删除:

<table cellspacing="0" cellpadding="0">
                <tr>
                        <td class="pls ptm pbm">
                              <!--{if $_G['page'] > 1}-->
                              <div id="tath" class="cl">
                                        <!--{if $_G && $_G}-->
                                                <a href="home.php?mod=space&uid=$_G

" title="$_G"><!--{avatar($_G,small)}--></a>
                                                {lang thread_author}: <a href="home.php?

mod=space&uid=$_G" title="$_G">$_G</a>
                                        <!--{else}-->
                                                {lang thread_author}:
                                                <!--{if $_G['forum']['ismoderator']}-->
                                                      <a href="home.php?mod=space&uid=$_G

">{lang anonymous}</a>
                                                <!--{else}-->
                                                      {lang anonymous}
                                                <!--{/if}-->
                                        <!--{/if}-->
                              </div>
                              <!--{else}-->
                              <div class="hm">
                                        <span class="xg1">{lang show}:</span> <span class="xi1">$_G

</span><span class="pipe">|</span><span class="xg1">{lang reply}:</span> <span class="xi1">$_G

</span>
                              </div>
                              <!--{/if}-->
                        </td>
                        <td class="plc ptm pbn">
                              <!--{if !IS_ROBOT}-->
                                        <div class="y">
                                                <!--{if $post['invisible'] == 0}--><a href="forum.php?

mod=viewthread&action=printable&tid=$_G" title="{lang thread_printable}" target="_blank"><img src="{IMGDIR}/print.png"

alt="{lang thread_printable}" class="vm" /></a>
                                                <!--{/if}-->
                                                <a href="forum.php?mod=redirect&goto=nextoldset&tid=$_G

" title="{lang last_thread}"><img src="{IMGDIR}/thread-prev.png" alt="{lang last_thread}" class="vm" /></a>
                                                <a href="forum.php?mod=redirect&goto=nextnewset&tid=$_G

" title="{lang next_thread}"><img src="{IMGDIR}/thread-next.png" alt="{lang next_thread}" class="vm" /></a>
                                        </div>
                              <!--{/if}-->
                              <h1 class="ts">
                                        <!--{if $_G['forum_thread']['typeid'] && $_G['forum']['threadtypes']['types']

[$_G['forum_thread']['typeid']]}-->
                                                <!--{if !IS_ROBOT && ($_G['forum']['threadtypes']['listable'] ||

$_G['forum']['status'] == 3)}-->
                                                      <a href="forum.php?mod=forumdisplay&fid=$_G

&filter=typeid&typeid=$_G">[{$_G['forum']['threadtypes']['types'][$_G['forum_thread']['typeid']]}]</a>
                                                <!--{else}-->
                                                      [{$_G['forum']['threadtypes']['types'][$_G

['forum_thread']['typeid']]}]
                                                <!--{/if}-->
                                        <!--{/if}-->
                                        <!--{if $threadsorts && $_G['forum_thread']['sortid']}-->
                                                <a href="forum.php?mod=forumdisplay&fid=$_G

&filter=sortid&sortid=$_G">[{$_G['forum']['threadsorts']['types'][$_G['forum_thread']['sortid']]}]</a>
                                        <!--{/if}-->
                                        <a href="forum.php?mod=viewthread&tid=$_G"

id="thread_subject">$_G</a>
                                        <span class="xw0 xs1 xg1">
                                        <!--{if $_G['forum_thread'] == -2}-->({lang moderating})
                                        <!--{elseif $_G['forum_thread'] == -3}-->({lang have_ignored})
                                        <!--{elseif $_G['forum_thread'] == -4}-->({lang draft})
                                        <!--{/if}-->
                                        <!--{if $_G['forum_thread']['recommendlevel']}-->
                                                 <img src="{IMGDIR}/recommend_$_G['forum_thread']

['recommendlevel'].gif" alt="" title="{lang thread_recommend} $_G['forum_thread']" />
                                        <!--{/if}-->
                                        <!--{if $_G['forum_thread']}-->
                                                 <img src="{IMGDIR}/hot_$_G['forum_thread']

.gif" alt="" title="$_G['forum_thread'] {lang heats}" />
                                        <!--{/if}-->
                                        <!--{if $_G['forum_thread']['closed'] == 1}-->
                                                 <img src="{IMGDIR}/locked.gif" alt="{lang close}"

title="{lang close}" class="vm" />
                                        <!--{/if}-->
                                        <a href="forum.php?mod=viewthread&tid=$_G$fromuid"

onclick="return copyThreadUrl(this)" title="{lang share_url_copy_comment}">[{lang share_url_copy}]</a>
                                        </span>
                                        <!--{hook/viewthread_title_extra}-->
                              </h1>
                        </td>
                </tr>
</table>
(6)保存或者覆盖至当前风格目录下”viewthread.htm“文件;
(7)文本方式打开./template/yourtemplate/common/extend_common.css文件;
(8)在最尾部加入如下样式:
/*整体框架样式*/
.kmn19vbt {
background: url({IMGDIR}/comiis_n19vbtbg.jpg) repeat-x;
height: 38px;
line-height: 38px;
}
.kmtx {
border-color: #D9E6BB;
}
.kmr0 {
padding-left: 8px;
padding-right: 3px;
}
.bm_h {
border-top: 1px solid #E3E3E3;
}
.comiis_cks {
line-height: 13px;
margin-top: 5px;
padding: 0 6px;
border-right: 1px solid #D4DCBE;
}
.comiis_hfs a, .comiis_cks a {
color: #8CA226;
}
.comiis_hfs {
line-height: 13px;
margin-top: 5px;
padding: 0 4px 0 7px;
border-right: 0px solid #D4DCBE;
}
.comiis_sxy {
padding-top: 10px;
line-height: 16px;
padding-left: 10px;
}
/*标题文字*/
.kmn19vbt .z, .kmn19vbt .z a {
font: 400 18px/38px 'Microsoft Yahei','黑体';
}
.kmr0 h2, .kmr0 h2 a {
color: #334F67;
}
/*复制链接*/
.kmn19vbt .kmfz, .kmn19vbt .kmfz a {
color: #999;
font-size: 12px;
line-height: 45px;
}

(9)将文件”comiis_n19vbtbg.jpg“上传至当前使用模板对应的图片目录;
(10)保存或者覆盖至当前风格目录下”extend_common.css“文件;
(11)登陆Discuz!X后台,更新站点缓存;
(12)刷新帖子内容页,查看修改效果。

-------------------------------
相关文件:
效果演示:




眼镜蛇 发表于 2012-12-20 09:31:42

其他美化修改内容预告:
1.帖子标题栏样式;
2.用户信息栏“小三角“;
3.各楼层分离效果。
页: [1]
查看完整版本: Discuz!X帖子内容页样式美化修改方法 - 标题栏(仿19lou)