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)刷新帖子内容页,查看修改效果。
-------------------------------
相关文件:
效果演示:
其他美化修改内容预告:
1.帖子标题栏样式;
2.用户信息栏“小三角“;
3.各楼层分离效果。
页:
[1]