Discuz教程网

[模板制作] discuz手机模版风格制作之莱鸟也来做风格(第一课)

[复制链接]
authicon dly 发表于 2011-10-7 12:19:14 | 显示全部楼层 |阅读模式
154943w5a9ieiz3mi939eb.gif
改变首页,需要修改的文件:
template\default\mobile\forum\discuz.htm      手机版首页主页内容


想要改的好看点,还需要修改
template\default\mobile\common\header.htm     手机版头部
template\default\mobile\common\footer.htm      手机版底部

修改前提:
一、会html的基本修改。(这个我还不怎么会呢  -_-。!)
二、会使用“论坛后台”。
三、会使用FTP工具。
四、会备份文件。 (不会备份的不要修改哦,出错了你可以用备份的文件重新覆盖!)
五、看的懂中文和少数英文。(本教程是莱鸟写出来的,所以并不保证不出错!怕出问题的的不要冒险啊!我不负责的!修改出错时,请按照“修改前提四”进行恢复)


好,啰嗦完了,开始动手修改吧!!!!

一、打开\template\default\mobile\forum 里面的discuz.htm文件。

在两个class为 fl 的div中间加上想要的样式,

  1. <div class="fl">
  2. <div class="bm">
  3. <div class="bm_h">今日推荐</div>
  4. <!--{block/1234}-->
  5. </div>
复制代码
这个     <!--{block/1234}-->    是什么呢???

    恩,用电脑打开 “后台“  →“门户”→“模块管理”→“数据调用”
    添加一个数据调用的模块,然后选择内部调用,类似 <!--{block/1234}--> 的代码就出来了!!!
   
  看不懂中文的同学看图拉!!!!有图有真相啊!
153042ff5folxx53ltoofl.jpg.thumb.jpg

修改完之后,discuz.htm的代码为
  1. <!--{subtemplate mobile/common/header}-->
  2. <!--{hook/index_top_mobile}-->

  3. <!--{if $forum_favlist}-->
  4. <div class="fl">
  5. <div class="bm">
  6. <div class="bm_h">
  7. <a href="home.php?mod=space&uid={$_G[uid]}&do=favorite&view=me&type=forum">{lang my_favorites_forums}</a>
  8. </div>
  9. {eval $i=1;}
  10. <!--{loop $forum_favlist $key $val}-->
  11. <div class="bm_c <!--{if $i%2 == 1}-->add<!--{else}-->even<!--{/if}-->"><a href="forum.php?mod=forumdisplay&fid={$val['id']}">$val['title']</a> <a href="home.php?mod=spacecp&ac=favorite&op=delete&favid={$val[favid]}&type=forum" title="{lang favorite_delete}" class="xg1">[x]</a></div>
  12. {eval $i++;}
  13. <!--{/loop}-->
  14. </div>
  15. </div>
  16. <!--{/if}-->

  17. <div class="fl">
  18. <div class="bm">
  19. <div class="bm_h">热点推荐</div>
  20. <!--{block/1234}-->
  21. </div>

  22. <!--{loop $catlist $key $cat}-->
  23. <div class="fl">
  24. <div class="bm">
  25. <div class="bm_h">
  26. <!--{if $_G[setting][mobile][mobileforumview] == 1}--><a href="forum.php?viewgid={if $cat[fid] != $_G[gp_viewgid]}{$cat[fid]}{else}0{/if}">$cat[name]</a><!--{else}-->$cat[name]<!--{/if}-->
  27. </div>
  28. <!--{if $_G[setting][mobile][mobileforumview] == 0 || ($cat[fid] == $_G[gp_viewgid])}-->
  29. {eval $i=1;}
  30. <!--{loop $cat[forums] $forumid}-->
  31. <div class="bm_c <!--{if $i%2 == 1}-->add<!--{else}-->even<!--{/if}-->">
  32. <!--{eval $forum=$forumlist[$forumid];}-->
  33. <a href="forum.php?mod=forumdisplay&fid={$forum['fid']}" {if $forum_favlist[$forumid]}class="xi1"{/if}>{$forum[name]}</a> <!--{if $forum[todayposts] > 0}--><font class="xg1">($forum[todayposts])</font><!--{/if}-->
  34. </div>
  35. {eval $i++;}
  36. <!--{/loop}-->
  37. <!--{/if}-->
  38. </div>
  39. </div>
  40. <!--{/loop}-->
  41. <!--{hook/index_middle_mobile}-->
  42. <div class="box">
  43. {lang index_today}$todayposts<span class="pipe">|</span>{lang index_members}$_G['cache']['userstats']['totalmembers']<!--{if empty($gid) && $_G['setting']['whosonlinestatus'] && $onlinenum}--><span class="pipe">|</span>{lang online}$onlinenum<!--{/if}-->
  44. </div>
  45. <!--{hook/index_bottom_mobile}-->
  46. <!--{subtemplate mobile/common/footer}-->
复制代码
按照上面的方式,自己灵活的修改一下,需要多个的,就自己添加多一个“今日推荐”,然后修改修改,就基本可以做出自己想要首页了!

接下来,我们修改头部!

恩,先换个LOGO呢!制作一张小点的LOgo,命名为:logo.gif
然后打开 static\image\mobile\  把你做的图片logo.gif上传到里面,覆盖。



然后我们来修改一下首页的板块分类的颜色,打开:template\default\mobile\common\header.htm   
找到

  1. .bm .bm_h { padding: 2px; background: #2A6EB4; border-bottom:1px #02254b solid; color: #FFF; line-height: 20px; font-size: 10pt; }
复制代码
大概在63行左右的地方,把   background: #2A6EB4;  的  #2A6EB4;         换成你喜欢的颜色数值!!!!


  看不懂中文的同学看图拉!!!!有图有真相啊!
153333cnvxg4iix2f41x17.jpg.thumb.jpg

可素,像我们这种莱鸟,哪知道什么颜色是什么代码啊??(>﹏<)怎么办啊??(一开始我也不会的!)

但我当时记得有一句台词是怎么说来着??哦哦 “有问题,百度一下!”  于是咱百度了“网页颜色代码”。

快捷通道:http://www.zhaozi.cn/color.htm    (这个挺不错 !!!大家自己查找颜色代码哦!!!)

1533354innepwbclfiyfyn.jpg.thumb.jpg

三、修改底部

修改:  template\default\mobile\common\footer.htm      

这个比较简单,就不说了,只是删除了几句代码而已~~大家可以把文件下载后,对比原文件就知道了~


最终结果演示:
1533366t3hthhix3fz3qzf.jpg
懒人包: discuz手机风格小修改.zip (40.1 KB, 下载次数: 23)



上一篇:Discuz X2在帖子页面头像下面增加横排显示积分帖子好友
下一篇:21个精美论坛等级图标
authicon 新亮 发表于 2011-12-20 11:06:32 | 显示全部楼层
看看学习一下。
authicon sealegend 发表于 2012-1-4 12:55:40 | 显示全部楼层
能告诉我丫挺什么意思吗?赐教
authicon ℡ζДrξ° 发表于 2014-7-1 16:22:38 | 显示全部楼层
[s_catsoul=5]给力![/s_catsoul]
authicon 你的bb 发表于 2014-12-28 18:19:48 | 显示全部楼层
垃圾垃圾垃圾垃圾垃圾垃圾
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-5-1 23:27

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表