最新 Discuz X2.5漂亮的首页多格DIY调用

蓝雨

实现方法：
1、上传图片文件（默认模板目录：/static/image/common/）
把附件下载，然后解压，把img 文件夹传到你的文件目录（看清楚，img文件夹不是文件夹的内容）
2、CSS添加N格css样式，拷贝位置参考下面。

1. .frame{ border:none; padding:0px; margin:0px}
   
2. .move-span { border:none; background:none; padding:0px; margin:0px}
   
3. .yeei_sw{padding:0; border-left:1px solid #D9D9D9; border-right:1px solid #D9D9D9; border-top: 1px solid #D9D9D9;}
   
4. .yeei_sw1{height:107px; overflow:hidden;border-bottom:1px solid #D9D9D9;}
   
5. .yeei_sw1l{ margin-right:320px;_margin-right:323px;padding:10px 10px 0 15px;background:#fff url({IMGDIR}/img/show_1_bg.gif) repeat-x 0 0px;position: relative}
   
6. .yeei_sw1l .hot{background:url({IMGDIR}/img/new.png) no-repeat right 0;position: absolute;right:0px;top:1px; width:48px; height:47px;_background:none}
   
7. .yeei_sw1l .m { margin-top:0px; padding-right:5px;*padding-right:0px}
   
8. .yeei_sw1l .m img{ border:1px solid #E0E0E0; background:#fff; padding:1px}
   
9. .yeei_sw1l dt{ font-size:16px; padding-bottom:3px; padding-top:1px;font-family:'Hiragino Sans GB','Microsoft YaHei','宋体',Helvetica,Arial,sans-serif;}
   
10. .yeei_sw1l dd{ color:#666;margin-bottom:5px}
    
11. .yeei_sw1l .b{ color:#888;}
    
12. .yeei_sw1l .b a{ color:#77828E; margin-right:6px}
    
13. .yeei_sw1r{float:right;height:98px; width:313px;_width:316px; overflow:hidden; padding-left:7px; padding-top:8px;background:url({IMGDIR}/img/show_2_bg.gif) no-repeat 0 0;}
    
14. .yeei_sw1r .chart{ background:none;width:300px; padding-bottom:10px; padding-left:6px;background: url({IMGDIR}/img/bottom_b.gif) repeat-x 0 bottom;}
    
15. .yeei_sw1r .yeei_wb{ padding-left:7px; padding-top:2px;}
    
16. .yeei_sw1r a{cursor: pointer;}
    
17. .yeei_sw1r a:hover{text-decoration: none;}
    
18. .yeei_wb dt { height:19px;overflow:hidden;padding-bottom:9px;font-family:'宋体',Helvetica,Arial,sans-serif; font-weight: 700;background:url({IMGDIR}/img/wb.gif) no-repeat -54px 4px; padding-left:17px}
    
19. .yeei_wb .n { float: left; color:#666; width:220px; overflow:hidden; background:#FFFFF0; border:1px solid #EDD180; height:23px; line-height:23px; padding:0 6px;}
    
20. .yeei_wb .n b{ color:#F08800; font-weight:none}
    
21. .yeei_wb .m { float: left; margin:0px; height:54px; width:54px; margin-right:7px;}
    
22. .yeei_wb .m img{ border:1px solid #85898C; padding:1px;}
    
23. .yeei_wb span{float:left; margin-top:2px;margin-right:10px; font-size:14px}
    
24. .yeei_wb .ting{width:66px;height:19px;display: block;background:url({IMGDIR}/img/wb.gif) no-repeat 0 bottom; float:left}
    
25. .yeei_sw2{height:195px;overflow:hidden;border-bottom:1px solid #D9D9D9}
    
26. .yeei_sw2l{margin-right:318px;height:195px;border-right:1px solid #D9D9D9}
    
27. .yeei_sw2r{ float:right;width:313px; overflow:hidden; padding-left:5px; padding-top:5px;}
    
28. .yeei_sw2l .title{background: url({IMGDIR}/img/tab_bg.gif) repeat-x 0 0; height:40px;}
    
29. .yeei_sw2l .titletext{font-size:12px;font-weight:normal;}
    
30. .yeei_sw2l .tb a{padding:0px; background: url({IMGDIR}/img/tab_a.gif) no-repeat 0 -40px!important; margin-right:5px; color:#444; border:none;text-align:center;width:85px; height:40px}
    
31. .yeei_sw2l .tb-c{ padding:10px; border:none}
    
32. .yeei_sw2l .tb .a a {background:url({IMGDIR}/img/tab_a.gif) no-repeat 0 0!important;font-weight: 700; color:#333;}
    
33. .yeei_sw2l .module ul li{width:50%;*width:49%;border-bottom:1px dotted #ddd; float:left; margin-bottom:3px; padding:0 0px 3px 0; }
    
34. .yeei_sw2l .module ul li span{background:url({IMGDIR}/img/li.gif) no-repeat 5px 6px; padding-left:15px;}
    
35. .yeei_sw2l .module ul li em{ font-size:11px; margin-right:10px;}
    
36. .yeei_sw2l .module ul li a:hover{color:#225F8F;text-decoration: none;}

复制代码

3、模板中添加N格代码（默认模板文件是：/template/default/forum/Discuz.htm），拷贝位置参考下面

1. <!--yeei_sw start-->
   
2. <div class="yeei_sw">
   
3. <div class="yeei_sw1">
   
4. <div class="yeei_sw1r">
   
5. <!--{if empty($gid)}-->
   
6. <div id="chart" class="bm bw0 cl">
   
7. <p class="chart z">{lang index_today}: <em>$todayposts</em><span class="pipe">|</span>{lang index_yesterday}: <em>$postdata[0]</em><span class="pipe">|</span>{lang index_posts}: <em>$posts</em><span class="pipe">|</span>{lang index_members}: <em>$_G['cache']['userstats']['totalmembers']</em></p>
   
8. </div>
   
9. <!--{/if}-->
   
10. 
    
11. <div class="yeei_wb">
    
12. 
    
13. <!--[diy=yeei2]--><div id="yeei2" class="area"></div><!--[/diy]-->
    
14. </div>
    
15. </div>
    
16. <div class="yeei_sw1l">
    
17. <div class="hot"></div>
    
18. <!--[diy=yeei1]--><div id="yeei1" class="area"></div><!--[/diy]-->
    
19. 
    
20. </div>
    
21. 
    
22. </div>
    
23. <div class="yeei_sw2">
    
24. <div class="yeei_sw2r">
    
25. 
    
26. <!--[diy=yeei4]--><div id="yeei4" class="area"></div><!--[/diy]-->
    
27. </div>
    
28. <div class="yeei_sw2l">
    
29. <!--[diy=yeei3]--><div id="yeei3" class="area"></div><!--[/diy]-->
    
30. </div>
    
31. 
    
32. 
    
33. </div>
    
34. 
    
35. </div>
    
36. <!--yeei_sw end-->

复制代码

4、打开论坛首页，管理账号登陆，导入论坛XML文件！
然后更新缓存 就可以了！

注意：鉴于很多会员依然问代码拷贝位置，那就公布下来吧！
CSS添加位置：
查看当前模板下是否有extend_common.css这个样式文件。如果有请将以下代码拷贝到这个样式文件底部。如果没有该CSS文件，则将CSS样式拷贝到template\default\common\common.css底部。

HTML代码拷贝位置：
找到“template\default\forum\discuz.htm”模板，查找：

1. <div id="ct" class="wp cl{if $_G['setting']['forumallowside']} ct2{/if}">

复制代码

将上面HTML代码拷贝到下面，不是覆盖！

YEEI首页N格.rar (116.03 KB, 下载次数: 7)

2012-9-25 16:24 上传

点击文件名下载附件