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

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

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

到./template/yourtemplate/forum/下；
（2）文本方式打开当前风格目录下”viewthread.htm“文件；
（3）查找如下代码：

1. <div id="postlist" class="pl bm">

复制代码

（4）在查找的位置前面增加如下代码：

1. <div class="bm_h kmtx kmr0 kmn19vbt">
   
2. <span class="z"></span>
   
3. <h2 class="z">
   
4.                                                                                              <!--{if $_G['forum_thread']['typeid'] && $_G['forum']['threadtypes']['types']
   
5. 
   
6. [$_G['forum_thread']['typeid']]}-->
   
7.                                                 <!--{if !IS_ROBOT && ($_G['forum']['threadtypes']['listable'] ||
   
8. 
   
9. $_G['forum']['status'] == 3)}-->
   
10.                                                         <a href="forum.php?mod=forumdisplay&fid=$_G[fid]
    
11. 
    
12. &filter=typeid&typeid=$_G[forum_thread][typeid]">[{$_G['forum']['threadtypes']['types'][$_G['forum_thread']['typeid']]}]</a>
    
13.                                                 <!--{else}-->
    
14.                                                         [{$_G['forum']['threadtypes']['types'][$_G
    
15. 
    
16. ['forum_thread']['typeid']]}]
    
17.                                                 <!--{/if}-->
    
18.                                         <!--{/if}-->
    
19.                                         <!--{if $threadsorts && $_G['forum_thread']['sortid']}-->
    
20.                                                 <a href="forum.php?mod=forumdisplay&fid=$_G[fid]
    
21. 
    
22. &filter=sortid&sortid=$_G[forum_thread][sortid]">[{$_G['forum']['threadsorts']['types'][$_G['forum_thread']['sortid']]}]</a>
    
23.                                         <!--{/if}-->
    
24. <a href="forum.php?mod=viewthread&tid=$_G[tid]" id="thread_subject">$_G[forum_thread][subject]</a>
    
25. </h2>        
    
26. <span class="z kmfz">
    
27.                                                                                               <!--{if $_G['forum_thread'][displayorder] == -2}-->({lang moderating})
    
28.                                         <!--{elseif $_G['forum_thread'][displayorder] == -3}-->({lang have_ignored})
    
29.                                         <!--{elseif $_G['forum_thread'][displayorder] == -4}-->({lang draft})
    
30.                                         <!--{/if}-->
    
31.                                         <!--{if $_G['forum_thread']['recommendlevel']}-->
    
32.                                                  <img src="{IMGDIR}/recommend_$_G['forum_thread']
    
33. 
    
34. ['recommendlevel'].gif" alt="" title="{lang thread_recommend} $_G['forum_thread'][recommends]" />
    
35.                                         <!--{/if}-->
    
36.                                         <!--{if $_G['forum_thread'][heatlevel]}-->
    
37.                                                  <img src="{IMGDIR}/hot_$_G['forum_thread']
    
38. 
    
39. [heatlevel].gif" alt="" title="$_G['forum_thread'][heatlevel] {lang heats}" />
    
40.                                         <!--{/if}-->
    
41.                                         <!--{if $_G['forum_thread']['closed'] == 1}-->
    
42.                                                  <img src="{IMGDIR}/locked.gif" alt="{lang close}"
    
43. 
    
44. title="{lang close}" class="vm" />
    
45.                                         <!--{/if}-->
    
46. <a href="forum.php?mod=viewthread&tid=$_G[tid]$fromuid" onclick="return copyThreadUrl(this)" title="{lang
    
47. 
    
48. share_url_copy_comment}">[{lang share_url_copy}]</a>
    
49. </span>                        
    
50. <span class="y comiis_hfs"><a>$_G[forum_thread][replies]</a><br>{lang reply}</span>
    
51. <span class="y comiis_cks"><a>$_G[forum_thread][views]</a><br>{lang show}</span>
    
52. <!--{if !IS_ROBOT}-->
    
53. <span class="y comiis_sxy">
    
54. <!--{if $post['invisible'] == 0}-->
    
55. <a href="forum.php?mod=viewthread&action=printable&tid=$_G[tid]" title="{lang thread_printable}" target="_blank"><img
    
56. 
    
57. src="{IMGDIR}/print.png" alt="{lang thread_printable}" class="vm" /></a>
    
58. <!--{/if}-->
    
59. <a href="forum.php?mod=redirect&goto=nextoldset&tid=$_G[tid]" title="{lang last_thread}"><img src="{IMGDIR}/thread-
    
60. 
    
61. prev.png" alt="{lang last_thread}" class="vm" /></a>
    
62. <a href="forum.php?mod=redirect&goto=nextnewset&tid=$_G[tid]" title="{lang next_thread}"><img src="{IMGDIR}/thread-
    
63. 
    
64. next.png" alt="{lang next_thread}" class="vm" /></a>
    
65. </span>
    
66. <!--{/if}-->
    
67. </div>

复制代码

（5）在步骤3查找的代码位置[postlist]下查找如下代码，并删除：

1. <table cellspacing="0" cellpadding="0">
   
2.                 <tr>
   
3.                         <td class="pls ptm pbm">
   
4.                                 <!--{if $_G['page'] > 1}-->
   
5.                                 <div id="tath" class="cl">
   
6.                                         <!--{if $_G[forum_thread][authorid] && $_G[forum_thread][author]}-->
   
7.                                                 <a href="home.php?mod=space&uid=$_G[forum_thread]
   
8. 
   
9. [authorid]" title="$_G[forum_thread][author]"><!--{avatar($_G[forum_thread][authorid],small)}--></a>
   
10.                                                 {lang thread_author}: <a href="home.php?
    
11. 
    
12. mod=space&uid=$_G[forum_thread][authorid]" title="$_G[forum_thread][author]">$_G[forum_thread][author]</a>
    
13.                                         <!--{else}-->
    
14.                                                 {lang thread_author}:
    
15.                                                 <!--{if $_G['forum']['ismoderator']}-->
    
16.                                                         <a href="home.php?mod=space&uid=$_G
    
17. 
    
18. [forum_thread][authorid]">{lang anonymous}</a>
    
19.                                                 <!--{else}-->
    
20.                                                         {lang anonymous}
    
21.                                                 <!--{/if}-->
    
22.                                         <!--{/if}-->
    
23.                                 </div>
    
24.                                 <!--{else}-->
    
25.                                 <div class="hm">
    
26.                                         <span class="xg1">{lang show}:</span> <span class="xi1">$_G
    
27. 
    
28. [forum_thread][views]</span><span class="pipe">|</span><span class="xg1">{lang reply}:</span> <span class="xi1">$_G
    
29. 
    
30. [forum_thread][replies]</span>
    
31.                                 </div>
    
32.                                 <!--{/if}-->
    
33.                         </td>
    
34.                         <td class="plc ptm pbn">
    
35.                                 <!--{if !IS_ROBOT}-->
    
36.                                         <div class="y">
    
37.                                                 <!--{if $post['invisible'] == 0}--><a href="forum.php?
    
38. 
    
39. mod=viewthread&action=printable&tid=$_G[tid]" title="{lang thread_printable}" target="_blank"><img src="{IMGDIR}/print.png"
    
40. 
    
41. alt="{lang thread_printable}" class="vm" /></a>
    
42.                                                 <!--{/if}-->
    
43.                                                 <a href="forum.php?mod=redirect&goto=nextoldset&tid=$_G
    
44. 
    
45. [tid]" title="{lang last_thread}"><img src="{IMGDIR}/thread-prev.png" alt="{lang last_thread}" class="vm" /></a>
    
46.                                                 <a href="forum.php?mod=redirect&goto=nextnewset&tid=$_G
    
47. 
    
48. [tid]" title="{lang next_thread}"><img src="{IMGDIR}/thread-next.png" alt="{lang next_thread}" class="vm" /></a>
    
49.                                         </div>
    
50.                                 <!--{/if}-->
    
51.                                 <h1 class="ts">
    
52.                                         <!--{if $_G['forum_thread']['typeid'] && $_G['forum']['threadtypes']['types']
    
53. 
    
54. [$_G['forum_thread']['typeid']]}-->
    
55.                                                 <!--{if !IS_ROBOT && ($_G['forum']['threadtypes']['listable'] ||
    
56. 
    
57. $_G['forum']['status'] == 3)}-->
    
58.                                                         <a href="forum.php?mod=forumdisplay&fid=$_G[fid]
    
59. 
    
60. &filter=typeid&typeid=$_G[forum_thread][typeid]">[{$_G['forum']['threadtypes']['types'][$_G['forum_thread']['typeid']]}]</a>
    
61.                                                 <!--{else}-->
    
62.                                                         [{$_G['forum']['threadtypes']['types'][$_G
    
63. 
    
64. ['forum_thread']['typeid']]}]
    
65.                                                 <!--{/if}-->
    
66.                                         <!--{/if}-->
    
67.                                         <!--{if $threadsorts && $_G['forum_thread']['sortid']}-->
    
68.                                                 <a href="forum.php?mod=forumdisplay&fid=$_G[fid]
    
69. 
    
70. &filter=sortid&sortid=$_G[forum_thread][sortid]">[{$_G['forum']['threadsorts']['types'][$_G['forum_thread']['sortid']]}]</a>
    
71.                                         <!--{/if}-->
    
72.                                         <a href="forum.php?mod=viewthread&tid=$_G[tid]"
    
73. 
    
74. id="thread_subject">$_G[forum_thread][subject]</a>
    
75.                                         <span class="xw0 xs1 xg1">
    
76.                                         <!--{if $_G['forum_thread'][displayorder] == -2}-->({lang moderating})
    
77.                                         <!--{elseif $_G['forum_thread'][displayorder] == -3}-->({lang have_ignored})
    
78.                                         <!--{elseif $_G['forum_thread'][displayorder] == -4}-->({lang draft})
    
79.                                         <!--{/if}-->
    
80.                                         <!--{if $_G['forum_thread']['recommendlevel']}-->
    
81.                                                  <img src="{IMGDIR}/recommend_$_G['forum_thread']
    
82. 
    
83. ['recommendlevel'].gif" alt="" title="{lang thread_recommend} $_G['forum_thread'][recommends]" />
    
84.                                         <!--{/if}-->
    
85.                                         <!--{if $_G['forum_thread'][heatlevel]}-->
    
86.                                                  <img src="{IMGDIR}/hot_$_G['forum_thread']
    
87. 
    
88. [heatlevel].gif" alt="" title="$_G['forum_thread'][heatlevel] {lang heats}" />
    
89.                                         <!--{/if}-->
    
90.                                         <!--{if $_G['forum_thread']['closed'] == 1}-->
    
91.                                                  <img src="{IMGDIR}/locked.gif" alt="{lang close}"
    
92. 
    
93. title="{lang close}" class="vm" />
    
94.                                         <!--{/if}-->
    
95.                                         <a href="forum.php?mod=viewthread&tid=$_G[tid]$fromuid"
    
96. 
    
97. onclick="return copyThreadUrl(this)" title="{lang share_url_copy_comment}">[{lang share_url_copy}]</a>
    
98.                                         </span>
    
99.                                         <!--{hook/viewthread_title_extra}-->
    
100.                                 </h1>
     
101.                         </td>
     
102.                 </tr>
     
103. </table>

复制代码

（6）保存或者覆盖至当前风格目录下”viewthread.htm“文件；
（7）文本方式打开./template/yourtemplate/common/extend_common.css文件；
（8）在最尾部加入如下样式：

1. /*整体框架样式*/
   
2. .kmn19vbt {
   
3. background: url({IMGDIR}/comiis_n19vbtbg.jpg) repeat-x;
   
4. height: 38px;
   
5. line-height: 38px;
   
6. }
   
7. .kmtx {
   
8. border-color: #D9E6BB;
   
9. }
   
10. .kmr0 {
    
11. padding-left: 8px;
    
12. padding-right: 3px;
    
13. }
    
14. .bm_h {
    
15. border-top: 1px solid #E3E3E3;
    
16. }
    
17. .comiis_cks {
    
18. line-height: 13px;
    
19. margin-top: 5px;
    
20. padding: 0 6px;
    
21. border-right: 1px solid #D4DCBE;
    
22. }
    
23. .comiis_hfs a, .comiis_cks a {
    
24. color: #8CA226;
    
25. }
    
26. .comiis_hfs {
    
27. line-height: 13px;
    
28. margin-top: 5px;
    
29. padding: 0 4px 0 7px;
    
30. border-right: 0px solid #D4DCBE;
    
31. }
    
32. .comiis_sxy {
    
33. padding-top: 10px;
    
34. line-height: 16px;
    
35. padding-left: 10px;
    
36. }
    
37. /*标题文字*/
    
38. .kmn19vbt .z, .kmn19vbt .z a {
    
39. font: 400 18px/38px 'Microsoft Yahei','黑体';
    
40. }
    
41. .kmr0 h2, .kmr0 h2 a {
    
42. color: #334F67;
    
43. }
    
44. /*复制链接*/
    
45. .kmn19vbt .kmfz, .kmn19vbt .kmfz a {
    
46. color: #999;
    
47. font-size: 12px;
    
48. line-height: 45px;
    
49. }

复制代码

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

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

其他美化修改内容预告：
1.帖子标题栏样式；
2.用户信息栏“小三角“；
3.各楼层分离效果。