rinald_未来往事

discuzX3页面增加广播台/推荐新闻

Discuz
discuz!X页面增加广播台/推荐新闻模块:

支持版本:X2/X2.5/X3.0/3.1/3.2+

实现效果图:

1、根据上图布局HTML页面并标注上discuz能识别的diy标签
CSS代码如下,另存为choice.css文件:

  1. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, p, blockquote, th, td {margin: 0;padding: 0;}
  2. td, th, div {word-break: break-all;word-wrap: break-word;}
  3. ul, li {list-style: none outside none;}
  4. .view-hover {list-style-position: outside;}
  5. a {color: #333333;text-decoration: none;}
  6. img {border: 0 none;}
  7. .choice_thread{border:4px solid #d3e4eb;padding-top:10px; background:#FFF;position:relative;margin-bottom:10px;}
  8. .choice_thread ul{display:inline;float:left;}
  9. .choice_thread .txt_list{border-right:1px solid #D9D9D9;margin-left:30px;height:168px;width:300px;overflow:hidden;}
  10. .choice_thread .txt_list li{line-height:27px;height:27px;margin-right:8px;background:url(dot.png) 0 center no-repeat;padding-left:10px;overflow:hidden;}
  11. .choice_thread .txt_list li a{font-size:14px;color:#20376B;white-space:nowrap;overflow:hidden;}
  12. #来源于未来往事博客 http://fity.cn
  13. .choice_thread .txt_list li a:hover{color:#005DD0;}
  14. .choice_thread .txt_list li a.redhot{color:#c00;}
  15. .choice_thread .txt_list .date{float:right;color:#080;}
  16. .choice_thread .pic_list {width:610px;margin-left:9px;}
  17. .choice_thread .pic_list li {width:144px;float:left;margin:0 4px;display:inline;}
  18. .choice_thread .pic_list li a{display:block;height:157px; padding:3px; text-align:center;border:1px solid #fcfcfc;font-size:12px;}
  19. .choice_thread .pic_list li img{display:block;margin-bottom:5px;}
  20. .choice_thread .pic_list li a:hover{background:#FEFED8;border:1px solid #E6C529;text-decoration:none;}
  21. .choice_hd{position:absolute;left:-4px;top:-4px;background:url(choice_threadbg.png) 0 0 no-repeat;display:block;width:51px;height:51px;overflow:hidden;text-indent:-80px;}
  22. .cc{*zoom:1;}
  23. .cc:after {clear: both;content: " ";display: block;height: 0;visibility: hidden;}
  24. .c{clear:both;overflow:hidden;height:auto;width:auto;}

用到的图片:
可以在附件中下载到

HTML代码如下(diy可视化编辑标签):

  1. <div class="choice_thread s cc">
  2. <span class="choice_hd">广播台</span>
  3. <div class="cc">
  4. <ul class="txt_list">
  5. <li><a title="测试标题" target="_blank" href="文章链接地址">测试标题</a></li>
  6. </ul>
  7. <ul class="pic_list cc">
  8. <li><a href="文章链接地址" target="_blank"><img width="146" height="116" border="0" src="图片链接地址" alt="测试标题">测试标题</a></li>
  9. </ul>
  10. </div>
  11. </div>
  12. #来源于未来往事博客 http://fity.cn

2、这里以添加到版块帖子列表页面,所以将上述HTML代码嵌入到模板目录下forumdisplay.htm页面中,并引入CSS样式

  1. <link rel="stylesheet" type="text/css" href="{STYLEIMGDIR}/choice.css" />
  2. #补充:{$_G['style']['styleimgdir']} 扩展图片目录
  3. <div class="choice_thread s cc">
  4. <span class="choice_hd">广播台</span>
  5. <div class="cc">
  6. <ul class="txt_list">
  7. <!--[diy=diychoicelist]--><div id="diychoicelist" class="area"></div><!--[/diy]-->
  8. </ul>
  9. <ul class="pic_list cc">
  10. <!--[diy=diychoicepic]--><div id="diychoicepic" class="area"></div><!--[/diy]-->
  11. </ul>
  12. </div>
  13. </div>
  14. #注意上述代码放置到你需要的的位置

3、后台更新缓存

4、前台diy—高级模式
1)在两个diy区块中分别添加100%框架并设置边距为0、无标题、边框无色
2)对添加框架后的diy模块继续添加’帖子模块’并设置内外边距为0、修改显示的条数(列表6条,图片4条)、图片列表只允许显示带有图片附件的帖子等信息
3)编辑推荐新闻列表’模块模板’,添加如下代码并模板另存为’广播台推荐新闻列表’:

  1. [loop]
  2. <li><a title="{title}"{target} href="{url}">{title}</a></li>
  3. [/loop]

4)编辑推荐新闻图片’模块模板’,添加如下代码并模板另存为’广播台推荐新闻图片’:

  1. [loop]
  2. <li><a href="{url}" target="_blank"><img width="136" height="116" border="0" src="{pic}" alt="{title}">{title}</a></li>
  3. [/loop]

5、保存—刷新
附上嵌入后的模板压缩包(基于discuz默认模板):
点击这里下载文件: forumdisplay.zip

原文作者:rinald
原文地址:http://fity.cn/post/494.html
互联网技术更新较快,本站很多文章具有实效性,我会及时更新原文,但转载的文章无法通知更新。为了不给读者造成困惑或误导,请您在转载时保留此出处信息,尊重别人也是尊重自己。

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。