X2正式版 默认模板修改记录（不停更新中...）

乘X2正式版刚出来，在这里记录一下在默认模板上修改的过程（适合不懂改模板的朋友），如果大家喜欢这样的修改，也可以参照着过程一步步跟着修改，过程中也可以认识到是怎么修改模板的，以后新手朋友也可以自已去研究了（做出来的东西一定要拿出来分享哦！） 当然比较懒的朋友也可以直接下载本帖最新更新的文件包直接替换默认模板 PS：本次记录只会对模板（外表）进行修改，不会对X2功能上有任何影响，也就是单一的“美化”修改记录，大家完全可以把这些修改成的模板当成是 “默认模板2”  来使用， 过程中大家遇到的问题可以即时回复，与本次修改记录无关的问题，请另外发帖 下面开始记录：

2011年9月19日更新：更改帖子内容页用户信息栏宽度

打开\template\default\common\module.css

找到：
.pls { width: 160px; background: {SPECIALBG}; overflow: hidden; border-right: 1px solid {CONTENTSEPARATE}; }

把数字改大点， 改完到后台更新CSS缓存




更改宽度后，用户栏信息可能会出现排列不整齐
这时可以打开common/module.css
找到：
.pls dd { width: 65px; }

修改这里的数字就可以了

---

2011年8月27日更新：给发帖按钮增加动态效果

hf.gif                                  ft.gif
                        

（以下的“模板”为默认模板，修改前请做好备份，修改完保存替换原文件再更新缓存）

1、 先保存以上两个图片放到static\image\common里，（注意图片的名字不要错了）
2、 打开\template\模板\common\common.css
     --- 找到：#pgt .pg, #pgt .pgb { margin-top: 5px; }
     --- 后面添加：（放在哪个位置都可以，放这段后面只是习惯放到相关代码的附近）

1. #pgt h1 a{ float:left; width:80px; height:33px; background:url({IMGDIR}/ft.gif) no-repeat center top; display:block; overflow:hidden}
   
2. #pgt h1 a:hover{ background:url({IMGDIR}/ft.gif) no-repeat center bottom;}
   
3. #pgt h2 a{ float:left; width:77px; height:33px; background:url({IMGDIR}/hf.gif) no-repeat center top; display:block; overflow:hidden}
   
4. #pgt h2 a:hover{ background:url({IMGDIR}/hf.gif) no-repeat center bottom;}

复制代码

3、 开始修改列表页和内容页的 这两个按钮了（我们这里只修改上面的按钮，下面的就不修改了，方法是类似的）
      --- 首先是打开列表页，\template\模板\forum\forumdisplay.htm
      --- 找到：

1. <!--{if !$_G['gp_archiveid']}--><a href="javascript:;" id="newspecial" onmouseover="$('newspecial').id = 'newspecialtmp';this.id = 'newspecial';showMenu({'ctrlid':this.id})"{if !$_G['forum']['allowspecialonly'] && empty($_G['forum']['picstyle']) && !$_G['forum']['threadsorts']['required']} onclick="showWindow('newthread', 'forum.php?mod=post&action=newthread&fid=$_G[fid]')"{else} onclick="location.href='forum.php?mod=post&action=newthread&fid=$_G[fid]';return false;"{/if} title="{lang send_posts}"><img src="{IMGDIR}/pn_post.png" alt="{lang send_posts}" /></a><!--{/if}-->

复制代码

--- 改成：

1. <!--{if !$_G['gp_archiveid']}--><h1><a href="javascript:;" id="newspecial" onmouseover="$('newspecial').id = 'newspecialtmp';this.id = 'newspecial';showMenu({'ctrlid':this.id})"{if !$_G['forum']['allowspecialonly'] && empty($_G['forum']['picstyle']) && !$_G['forum']['threadsorts']['required']} onclick="showWindow('newthread', 'forum.php?mod=post&action=newthread&fid=$_G[fid]')"{else} onclick="location.href='forum.php?mod=post&action=newthread&fid=$_G[fid]';return false;"{/if} title="{lang send_posts}"></a></h1><!--{/if}-->

复制代码

--- 保存。
4、 修改内容页，打开\template\模板\forum\viewthread.htm
      --- 找到：

1. <!--{else}-->
   
2. <!--{if !$_G['forum_thread']['is_archived']}--><a id="newspecial" onmouseover="$('newspecial').id = 'newspecialtmp';this.id = 'newspecial';showMenu({'ctrlid':this.id})"{if !$_G['forum']['allowspecialonly'] && empty($_G['forum']['picstyle']) && !$_G['forum']['threadsorts']['required']} onclick="showWindow('newthread', 'forum.php?mod=post&action=newthread&fid=$_G[fid]')"{else} onclick="location.href='forum.php?mod=post&action=newthread&fid=$_G[fid]';return false;"{/if} href="javascript:;" title="{lang send_posts}"><img src="{IMGDIR}/pn_post.png" alt="{lang send_posts}" /></a><!--{/if}-->
   
3. <!--{/if}-->
   
4. <!--{if $allowpostreply && !$_G['forum_thread']['archiveid']}-->
   
5. <a id="post_reply" onclick="showWindow('reply', 'forum.php?mod=post&action=reply&fid=$_G[fid]&tid=$_G[tid]')" href="javascript:;" title="{lang reply}"><img src="{IMGDIR}/pn_reply.png" alt="{lang reply}" /></a>
   
6. <!--{/if}-->

复制代码

--- 改成：

1. <!--{else}-->
   
2. <!--{if !$_G['forum_thread']['is_archived']}--><h1><a id="newspecial" onmouseover="$('newspecial').id = 'newspecialtmp';this.id = 'newspecial';showMenu({'ctrlid':this.id})"{if !$_G['forum']['allowspecialonly'] && empty($_G['forum']['picstyle']) && !$_G['forum']['threadsorts']['required']} onclick="showWindow('newthread', 'forum.php?mod=post&action=newthread&fid=$_G[fid]')"{else} onclick="location.href='forum.php?mod=post&action=newthread&fid=$_G[fid]';return false;"{/if} href="javascript:;" title="{lang send_posts}"></a></h1><!--{/if}-->
   
3. <!--{/if}-->
   
4. <!--{if $allowpostreply && !$_G['forum_thread']['archiveid']}-->
   
5. <h2><a id="post_reply" onclick="showWindow('reply', 'forum.php?mod=post&action=reply&fid=$_G[fid]&tid=$_G[tid]')" href="javascript:;" title="{lang reply}"></a></h2>
   
6. <!--{/if}-->

复制代码

《完成
底下的两个按钮就不写了，方法是类似的，大家可以自已研究下

---

1.  把头部顶部（收藏、切换宽版）那一行移到导航下面， 添加二级导航的其中一个方法， 添加“已运行天数”的代码 ：
     请看三楼，原帖地址已失效，https://discuz.dismall.com/thread-2171289-1-1.html

   

---

2. 更改“搜索”输入内容框的宽度：
    打开：template\default\common\common.css
    找到：#scbar_txt { width: 400px; border: 1px solid #FFF; outline: none; font-size: 14px; }
    修改红字部份数值， 为了对齐二级导航，建议改成148px
   

---

3.给网站整体添加一个向下循环的背景
       下载背景图      
       放到/static/image/common/  文件夹下
       后台界面  风格管理   编辑   
       找到“页面背景”分别填上：
       #f8f8f8
       bg.gif
       repeat-y top center

为了不影响切换到宽屏的页面，添加段代码
打开template\default\common\widthauto.css
添加：
body{ background:#fff}

完成...

待续...

---

2011.6.6更新
让帖子内容页每层楼分开：

1.打开viewthread.htm
找到：
<div id="postlist" class="pl bm">

改成如下：
<div id="postlist" class="pl" style="margin-bottom:10px; border-top:1px solid #ddd">




2.接着打开viewthread_node.htm
找到：
<table id="pid$post[pid]" summary="pid$post[pid]" cellspacing="0" cellpadding="0">
改成：
<table id="pid$post[pid]" summary="pid$post[pid]" cellspacing="0" cellpadding="0" class="msi" onMouseOver="this.className='mso'">

3.打开common.css
在最后面添加：
.mso{ border:1px solid #2770c0; margin-bottom:5px;}
.msi{ border:1px solid #ddd; margin-bottom:5px;}

更新缓存完成

如何把“搜索框改成百度搜索”
https://discuz.dismall.com/forum.php?mod=redirect&goto=findpost&ptid=2173809&pid=20868443

给网站添加已运行天数
https://discuz.dismall.com/forum.php?mod=redirect&goto=findpost&ptid=2173809&pid=20672751

2011年9月19日补充：
把头部顶部（收藏、切换宽版）那一行移到导航下面， 添加二级导航的其中一个方法， 添加“已运行天数”的代码

X2正式版的修改方法：
修改前请做好备份

1. 打开template/default/common/header.htm找到：

1. <div id="toptb" class="cl">
   
2. <div class="wp">
   
3. <div class="z">
   
4. <!--{loop $_G['setting']['topnavs'][0] $nav}-->
   
5. <!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}-->$nav[code]<!--{/if}-->
   
6. <!--{/loop}-->
   
7. <!--{hook/global_cpnav_extra1}-->
   
8. </div>
   
9. <div class="y">
   
10. <!--{hook/global_cpnav_extra2}-->
    
11. <!--{loop $_G['setting']['topnavs'][1] $nav}-->
    
12. <!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}-->$nav[code]<!--{/if}-->
    
13. <!--{/loop}-->
    
14. <!--{if $_G['basescript'] == 'forum' && empty($_G['disabledwidthauto']) && $_G['setting']['switchwidthauto']}-->
    
15. <a href="javascript:;" onClick="widthauto(this)"><!--{if !$_G['forum_widthauto']}-->{lang switch_wide}<!--{else}-->{lang switch_narrow}<!--{/if}--></a>
    
16. <!--{/if}-->
    
17. <!--{if $_G['uid'] && !empty($_G['style']['extstyle'])}--><a id="sslct" href="javascript:;" onMouseOver="delayShow(this, function() {showMenu({'ctrlid':'sslct','pos':'34!'})});">{lang changestyle}</a><!--{/if}-->
    
18. <!--{if CURMODULE != 'topic' && $_G['group']['allowdiy'] && !empty($_G['style']['tplfile']) || CURMODULE == 'topic' && !empty($_G['style']['tplfile']) && ($_G['group']['allowaddtopic'] && $topic['uid'] == $_G['uid'] || $_G['group']['allowmanagetopic'])}-->
    
19. <a id="diy-tg" href="javascript:openDiy();" title="{lang open_diy}" class="xi1 xw1">DIY</a>
    
20. <!--{/if}-->
    
21. </div>
    
22. </div>
    
23. </div>

复制代码

2.移到到下面这段的后面：

1.     <div id="mu" class="cl">
   
2.     <!--{if $_G['setting']['subnavs']}-->
   
3.      <!--{loop $_G[setting][subnavs] $navid $subnav}-->
   
4.       <!--{if $_G['setting']['navsubhover'] || $mnid == $navid}-->
   
5.       <ul class="cl {if $mnid == $navid}current{/if}" id="snav_$navid" style="display:{if $mnid != $navid}none{/if}">
   
6.       $subnav
   
7.       </ul>
   
8.       <!--{/if}-->
   
9.      <!--{/loop}-->
   
10.     <!--{/if}-->
    
11.     </div>

复制代码

2.1完成后，也可以接着在后面再插一段像官方一样的二级导航：

1. <div class="cl" id="dzf">
   
2. <style type="text/css">
   
3. #dzf{background: none repeat scroll 0 0 #fff;border: 1px solid #eee;line-height:160%;padding:15px 0;text-align: left;}
   
4. #dzf p{width:317px;text-indent:70px;background:url(http://www.dzx.me/images/1.png) no-repeat 10px 2px}
   
5. .dzfbl{border-left:1px solid #FFF}
   
6. .dzfbr{border-right:1px solid #DDD}
   
7. #dzf em{display:block;color:#D3DFDF}
   
8. #dzf .xg2{color:#666}
   
9. #dzf em a{color:#369}
   
10. #dzf .dm { text-indent: 0; }
    
11. #dzf .dmp { background:url("http://www.dzx.me/images/1.png") no-repeat 10px 2px; text-indent:70px; width:317px; }
    
12. </style>
    
13. <p class="z dzfbr">
    
14. <em><a href="http://dev.discuz.org/doing.php" target="_blank"><font color=#FF0000><b>Discuz! X 最新研发动态!实时更新</b></font></a>
    
15. </em>
    
16. <em><a href="" target="_blank">通过这个窗口，关注跟踪我们的研发进展</a><span class="pipe">|</span>
    
17. </em>
    
18. <em>
    
19. <a href="http://dev.discuz.org/doing.php" target="_blank"><font color=#FF0000>查看官方产品更新动态</font></a>
    
20. <img src="https://discuz.dismall.com/data/attachment/forum/month_0810/08102214435667558d74e34a55.gif" ><span class="pipe">|</span>
    
21. <a href="https://discuz.dismall.com/forum-22-1.html" target="_blank">我来提建议</a>
    
22. </em>
    
23. </p>
    
24. <div style="background-position: 10px -75px;" class="z dzfbr dzfbl dmp">
    
25. <strong>Discuz! X2.0 RC版发布</strong>
    
26. <em class="xg2">帮助网站实现一站式服务 程序修改</em>
    
27. <em>
    
28. <a href="http://download.comsenz.com/DiscuzX/2.0/" target="_blank">X2.0 下载</a>—
    
29. <a onmouseover="showMenu({'ctrlid':this.id})" id="u3T70v" class="menu_29" style="font-weight: bold;" class="dropmenu" hidefocus="true" href="#">插件/Hack</a>
    
30. <ul style="float: left; position: absolute; z-index: 301; left: 589.5px; top: 69px; display: none;" id="u3T70v_menu" class="p_pop h_pop dm">
    
31. <li><a target="_blank" hidefocus="true" href="https://discuz.dismall.com/forum-26-1.html">插件/Hack Discuz! X1.5</a></li>
    
32. <li><a target="_blank" hidefocus="true" href="https://discuz.dismall.com/forum-26-1.html">插件/Hack Discuz! X2.0</a></li>
    
33. </ul>
    
34. —
    
35. <a onmouseover="showMenu({'ctrlid':this.id})" id="u3T70a" class="menu_29" style="font-weight: bold;" class="dropmenu" hidefocus="true" href="#">风格/模板</a>
    
36. <ul style="float: left; position: absolute; z-index: 301; left: 589.5px; top: 69px; display: none;" id="u3T70a_menu" class="p_pop h_pop dm">
    
37. <li><a target="_blank" hidefocus="true" href="https://discuz.dismall.com/forum-21-1.html">风格/模板 Discuz! X1.5</a></li>
    
38. <li><a target="_blank" hidefocus="true" href="https://discuz.dismall.com/forum-21-1.html">风格/模板 Discuz! X2.0</a></li>
    
39. </ul>
    
40. </em>
    
41. </div>
    
42. 
    
43. <p style="background-position: 10px -145px;" class="z dzfbl">
    
44. <strong>Discuz! 插件/模板 相关技术性探讨区</strong>
    
45. <em class="xg2">带给你最快捷的开发技术与经验</em>
    
46. <em>
    
47. <a href="http://www.dzx.me/forum-50-1.html" target="_blank">Discuz!-安装使用 </a> —
    
48. <a href="http://www.dzx.me/forum-46-1.html" target="_blank">Discuz! 天涯海角</a>
    
49. </em>
    
50. </p>
    
51. </div>

复制代码

上面的内容请自行修改为自已的内容

2.2我们把第1步移动的代码的第一句里做一下修饰， 添加些代码（红字部份）：
<div id="toptb" class="cl" style="background:#f5f5f5;border-left:1px solid #eee;border-right:1px solid #eee;border-top:1px solid #eee;text-indent:4px">

3.接着找到

1. <!--{loop $_G['setting']['topnavs'][0] $nav}-->
   
2. <!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}-->$nav[code]<!--{/if}-->
   
3. <!--{/loop}-->

复制代码

移到到下面这段的 下面

1. <!--{if $_G['uid'] && !empty($_G['style']['extstyle'])}--><a id="sslct" href="javascript:;" onMouseOver="delayShow(this, function() {showMenu({'ctrlid':'sslct','pos':'34!'})});">{lang changestyle}</a><!--{/if}-->

复制代码

上面完成后，我们回到第3.步，那里移走了一段代码， 我们可以在移走前原来的地方加一段“已运行天数”代码到那里：
（如果忘了第3步在哪个位置，你可以搜“<div class="z">”，就在这句的后面添加以下代码）

1. Mybbss.com　<font color="red">D的图鉴</font>　已测试运行
   
2. <font color="red">
   
3. <script language=JavaScript>
   
4. var urodz= new Date("5/15/2011");
   
5. var now = new Date();
   
6. var ile = now.getTime() - urodz.getTime();
   
7. var dni = Math.floor(ile / (1000 * 60 * 60 * 24));
   
8. document.write(+dni)</script></font> 天　感谢您对我们的支持!　| Powered by Discuz! X2.0 RC

复制代码

你可以把上面的：new Date("5/15/2011") ， 改成你的网站开通日期就行了，
PS:如果你不想要这个，你可以自已写一段话， 直接在<div class="z">后面写就行了

4.然后，还要修正一下css代码， 我们打开template\default\common\common.css找到：
#hd .wp { padding: 10px 0 0; }

把红字删掉：
变成：#hd .wp { padding: 0; }

5.到这里，我们还要替换一下背景， 因为背景上有一条横线， 我们把它去掉，

这里已经有一张弄好的， 大家下载后替换掉目录下的文件就行了：
/static/image/common/background.png


完成， 更新缓存，有问题请跟帖回复

抢个楼

前排支持一下

今天换头部背景这双成通栏了

更新20116.6

记号

期待IN

不错的东东