[模板堂出品]蓝灰色的奇迹for discuz6.1和6.0版正式版(5.16新增个性改动，2楼）

** 风格名称：[模板堂出品]蓝灰色的奇迹for discuz6.1正式版
** 适用版本： Discuz!6.1.0
** 语言编码： gbk
** 风格作者： hldcp888
** 版权所属： 模板堂
** 风格转换者： 原创作品
** 支持网站： www.mobantang.com
** 演示地址： www.mobantang.com
**发布方式：免费发布，不收任何费用。
**发布时间：母亲节（5月11日）
测试通过   IE6+IE7+火狐
蓝灰色的奇迹，寓示着无论在顺境和逆境，只要坚持自已的信念，不懈努力，就能创造奇迹。

***************************************

风格图片目录 -- upload/images/mobantang
风格模版目录 -- upload/templates/mobantang
风格配色方案 -- doc/discuz_style_蓝灰色的奇迹.txt


//-------------------安装方法-------------------------------
1. 打开后台，点击  版块 -> 界面风格 -> 导入 -> 导入界面方案 -> 浏览 把discuz_style_蓝灰色的奇迹.txt导入，然后点 “提交”

2. 把风格包中的 images 内的 mobantang 目录上传到论坛目录下 images 目录内

3. 把风格包中的 templates 内的 mobantang 目录上传并覆盖到论坛目录下 templates 目录内

4. 最后到 后台 -> 工具 -> 左侧的更新缓存 -> 选中数据缓存和模板缓存 -> 确定，返回论坛选择风格看效果吧！
//---------------------------------------------------------

     此风格为免费风格，风格版权归 模板堂（www.mobantang.com），请保留一切版权说明，谢谢！

     最后，在这神圣的节日，祝天下的母亲健康长寿！


首页：


栏目页：


子页：


[ 本帖最后由 hldcp888 于 2008-5-16 09:24 编辑 ]

为了满足一些站长对此模板的个性化需要，并对站长提出的个性化需要，进行一一解答：（但是这些修改不会进入上面发布的压缩包里，如果你喜欢这些个性化的修改，你自已对照修改）。
    特别提供纯文字四格，只改动模板文件，纯JS调用。
   效果：
    修改模板：第一步，打开css_common.htm,找到/*~~~~~~~~~~~~~~~~~  toplist ~~~~~~~~~~~~~~~~~~~*/，开始到文件最后，全部换成：

1. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~  toplist ~~~~~~~~~~~~~~~~~~~~~~*/
   
2. .mbttoplist{
   
3.         border:1px solid #DAD7CB;
   
4. 
   
5. margin-top: 10px;
   
6. }
   
7. .mbttoplist th{
   
8.         background:#EEEEEA url({IMGDIR}/bg_top.gif) repeat-x scroll 0%;
   
9.         color: #666666;
   
10.         font-weight:bold;
    
11.         padding: 6px 10px 6px 10px;
    
12. }
    
13. .mbttoplist td{
    
14. 
    
15.         padding: 3px 3px 3px 0px;
    
16.         background: #F9F9F7;
    
17.         border-top:1px solid #DAD7CB;
    
18. }
    
19. .mbttoplist .light{
    
20.         border-left: 1px solid white;
    
21. }
    
22. .mbttoplist .dark{
    
23.         border-right: 1px solid #DAD7CB;
    
24. }
    
25. .mbttoplist div{
    
26.         height: 1.5em;
    
27.         overflow: hidden;
    
28. }
    
29. .mbttoplist span{
    
30.         float: right;
    
31.         color: #999;
    
32. }
    
33. #redback {width:258px; height:159px; margin:0px;  background:url({IMGDIR}/redback.gif) no-repeat top;padding:0px;}
    
34. #redback ul {margin:0px; padding:0 0 0 30px; line-height: 27px;}
    
35. #redback ul li {padding: 0 5 0 27px; margin:0px; }
    
36. #blueback {width:258px; height:159px; margin:0px; padding:0px; background:url({IMGDIR}/blueback.gif) no-repeat top;}
    
37. #blueback ul {margin:0px; padding:0 0 0 30px; line-height: 27px;}
    
38. #blueback ul li {padding: 0 5 0 27px; margin:0px; }
    
39. #huiyuan { width:133px;height:159px; margin:0px; padding:0px; background:url({IMGDIR}/huiyuan.gif) no-repeat top;}
    
40. #huiyuan ul {margin:0px; padding:0 0 0 30px; line-height: 27px;}
    
41. #huiyuan ul li {padding: 0 5 0 27px; margin:0px; }
    
42. .ctl01 { text-decoration:none; color:#333333; font-size:13px; line-height: 19px; }
    
43. .ctl01 a:link { text-decoration:none; color:#333333; }
    
44. .ctl01 a:visited { text-decoration:none; color:#333333; }
    
45. .ctl01 a:hover         { text-decoration:underline; color:#000080; }
    

复制代码

第二步，打开discuz.htm文件，你想到什么地方出现四格，就把下列代码加到什么地方！
  代码：

1. <div class="mbttoplist">
   
2. 
   
3. <table width="100%" cellpadding="0" cellspacing="0" border="0">
   
4. 
   
5.         <tr>
   
6.                 <th width="28%" class="dark">最新主题</td>
   
7.                 <th width="28%" class="light dark">最新回复</td>
   
8.         <th width="28%" class="light dark">热门主题</td>
   
9.                 <th width="15%" class="light">
   
10.                         <img id="mbttoplist_img" style="float:right;cursor:pointer;" src="{IMGDIR}/collapsed_no.gif" title="收起/展开" alt="收起/展开" onclick="toggle_collapse('mbttoplist');" />
    
11.                         会员排行
    
12.                 </td>
    
13.         </tr>
    
14. 
    
15.         <tbody id="mbttoplist" style="">
    
16.         <tr>
    
17. 
    
18.         <td valign="top" class="dark">
    
19.                 <!--new topic-->
    
20. <div id="redback">
    
21. <ul class="ctl01">
    
22.                 {eval request('threads_new');}
    
23. </ul>
    
24. </div>
    
25.         </td>
    
26. 
    
27.         <td valign="top" class="light dark">
    
28.                 <!--new reply-->
    
29.                 <div id="blueback">
    
30. <ul class="ctl01">
    
31.                 {eval request('threads_huifu');}
    
32. </ul>
    
33. </div>
    
34.         </td>
    
35. 
    
36.         <td valign="top" class="light dark">
    
37.                 <!--hot topic-->
    
38. <div id="blueback">
    
39. <ul class="ctl01">
    
40.                         {eval request('threads_hot');}
    
41. </ul>
    
42. </div>
    
43.         </td>
    
44. <td valign="top" class="light">
    
45.                 <!--huiyuan topic-->
    
46. <div id="huiyuan">
    
47. <ul class="ctl01">
    
48.         {eval request('memberrank_huiyuan');}
    
49. </ul>
    
50. </div>
    
51.         </td>
    
52.         </tr>
    
53.         </tbody></table></div>       

复制代码

像{eval request('threads_huifu');}，{eval request('threads_hot');}，{eval request('memberrank_huiyuan');}等，换成你自已的调用，至于怎么去设置调用，那去看官方的教程，
     再后，把3个图片，blueback.gif，redback.gif,huiyuan.gif,传上去，图片在这个包里：
    至此，四格文字就安装完毕了。

   一、 问：

原帖由 tzgay 于 2008-5-11 09:31 发表
首页底部没有有无新帖～
还有底部广告能否在上面的框内，不要单独出来隔在中间？

      答：打开footer.htm文件，找到以下代码：

1. </div></div></div>
   
2. {subtemplate jsmenu}
   
3. 
   
4. <!--{if $admode && empty($insenz['hardadstatus']) && !empty($advlist)}-->
   
5.         <div class="ad_footerbanner" id="ad_footerbanner1">$advlist[footerbanner1]</div><div class="ad_footerbanner" id="ad_footerbanner2">$advlist[footerbanner2]</div><div class="ad_footerbanner" id="ad_footerbanner3">$advlist[footerbanner3]</div>
   
6. <!--{else}-->
   
7.         <div id="ad_footerbanner1"></div><div id="ad_footerbanner2"></div><div id="ad_footerbanner3"></div>
   
8. <!--{/if}-->

复制代码

修改为：

1. {subtemplate jsmenu}
   
2. 
   
3. <!--{if $admode && empty($insenz['hardadstatus']) && !empty($advlist)}-->
   
4.         <div class="ad_footerbanner" id="ad_footerbanner1">$advlist[footerbanner1]</div><div class="ad_footerbanner" id="ad_footerbanner2">$advlist[footerbanner2]</div><div class="ad_footerbanner" id="ad_footerbanner3">$advlist[footerbanner3]</div>
   
5. <!--{else}-->
   
6.         <div id="ad_footerbanner1"></div><div id="ad_footerbanner2"></div><div id="ad_footerbanner3"></div>
   
7. <!--{/if}-->
   
8. </div></div></div>

复制代码

其实从修改来看，就是把代码的位置变了一下，这样的效果，就是把底部广告放在上面的框内。
二、问：
  

原帖由 tzgay 于 2008-5-11 09:38 发表
公告栏那里能不能使用白色背景啊，不要边框，这样比较舒服

      答：打开css_common.htm文件，找到代码：

1. #announcement { line-height: 33px; height: 35px; overflow: hidden;background-color: #FFEBCE;  }
   
2.         #announcement div { border: 1px solid #FFB663; padding: 0 10px; line-height: 32px !important; height: 33px; overflow-y: hidden;}

复制代码

背景色：background-color: #FFEBCE;，你喜欢修改什么色，就是什么色；框：border: 1px solid #FFB663; 你愿意去掉就去掉，随你心动！
三、问：这个模板右上角的连接怎么删，或者怎么改/
             如图：
       答：打开文件header.htm,找到如下代码：

1. <div id="mbttop">
   
2.                         <div class="wrapper">                       
   
3.                                 <ul class="topnav">
   
4.                                               <li class="first"><a href="#">discuz</a></li>
   
5. 
   
6.                                                <li><a href="#">uchome</a></li>
   
7. 
   
8.                                                 <li><a href="#">ss/xs</a></li>
   
9. 
   
10.                                 <li><a href="#">supev</a></li>
    
11. 
    
12.                                 <li><a href="#">ecshop</a></li>
    
13. 
    
14.                                 <li><a href="#" target="_blank">discuz!nt</a></li>
    
15. 
    
16.                                 <li><a href="#">Contact</a></li>
    
17.                         </ul>
    
18.                         </div>
    
19.                 </div>

复制代码

看到上述代码，至于怎么修改，就不用我一一说明了吧，呵呵！
四、问，编辑器所见即所得的背景如何修改？   
     如图：
       答：找到文件css_editor文件，这个文件在你原来默认default文件里，找到：
    #wysiwyg { font: {MSGFONTSIZE}/1.6em {FONT} !important; }
      改为：#wysiwyg { font: {MSGFONTSIZE}/1.6em {FONT} !important;background:#FFF; }
五、我想要首页显示版板图标，该怎么办呢？
  效果显示：

答：打开discuz.htm文件，找到代码：

1. <tbody id="forum$forum[fid]"><tr>                <th>                                                                <!--{if $forum[todayposts] && !$forum['redirect']}--><div class="todaynew">$forum[todayposts]<p>{lang index_today}</p></div><!--{else}--><div class="today">0<p>{lang index_today}</p></div><!--{/if}-->

复制代码

把它替换成：

1. <tbody id="forum$forum[fid]">        <tr>                                                        <th$forum[folder]>
   
2.         <!--{if $forum[todayposts] && !$forum['redirect']}--><div class="todaynew">$forum[todayposts]<p>{lang index_today}</p></div><!--{else}--><div class="today">0<p>{lang index_today}</p></div><!--{/if}-->$forum[icon]

复制代码

就大功告成了。

六问：如何在子栏目横排也显示版块图标和今日多少贴？   

效果如图：

解决方法：把这个文件上传到/templates/mobantang/下，然后更新后台缓存，就可以了
          文件在这里（这是6.1版）：
      
                                     （ 这里是6.0版）：

7问：近日有站长想要在首页横版也要显示版块图片？
     
    想要的效果是：
    答：修改方法为：打开discuz.htm,找到代码：

1. <th width="$cat[forumcolwidth]"{$forum[folder]}>
   
2.                                                         <!--{if $forum[todayposts] && !$forum['redirect']}--><div class="todaynew">$forum[todayposts]<p>{lang index_today}</p></div><!--{else}--><div class="today">0<p>{lang index_today}</p></div><!--{/if}--><h2><a href="forumdisplay.php?fid=$forum[fid]">$forum[name]</a></h2>

复制代码

替换成：

1. <th width="$cat[forumcolwidth]"{$forum[folder]}>
   
2.                                                         <!--{if $forum[todayposts] && !$forum['redirect']}--><div class="todaynew">$forum[todayposts]<p>{lang index_today}</p></div><!--{else}--><div class="today">0<p>{lang index_today}</p></div><!--{/if}-->$forum[icon]<h2><a href="forumdisplay.php?fid=$forum[fid]">$forum[name]</a></h2>

复制代码

就可以了！

[ 本帖最后由 hldcp888 于 2008-5-16 09:20 编辑 ]

是听好看的  收下了

不错、··

在支持下、、``好赞的风格、·

宽屏下有错误

原帖由 ywxs 于 2008-5-9 11:22 发表
宽屏下有错误

谢谢这位朋友，已经修改过来了，是因为用了绝对定位的缘故，呵

[ 本帖最后由 hldcp888 于 2008-5-9 11:31 编辑 ]

可以了 :)
能否改成自适应宽屏满屏的

呼呼……赞